Como colocar las etiquetas en forma de botones

viernes, diciembre 15, 2006

Anteriormente y gracias a betatrucos.blogspot.com hice un post de como colocar las etiquetas en forma de pestañas, este truco fue sacado de hoctro.blogspot.com, pues bien revisando este último blog encontré la manera de colocar las etiquetas en forma horizontal utilizando CSS.

Clic en la imagen para ver el ejemplo de las
etiquetas en vertical con css:



Se realizara casi el mismo procedimiento que para colocar etiquetas en forma de pestañas, solo que en la 3er parte en vez de colocar ese código colocamos el que nos brinda: csspicstock.blogspot.com (Tiene 14 diseños); para el ejemplo escogí el menu 4:

/*- Menu 4--------------------------- */

#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}

#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(http://photos1.blogger.com/blogg1600/menu4.gif);
padding: 8px 0 0 10px;
}

#menu4 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/1600/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

Luego en el paso 4 el cual se indica betatrucos.blogspot.com,(donde se sustituye el código azul por el rojo), cambie tabsF por menu4 (que es el que le corresponde al código que copiamos en el paso 3). Si escogen el menu 1, 2, 10 , o 13( para el paso 3), en el último paso tienen que sustituir tabsF, por el menu que le corresponda.

*Las etiquetas en la parte horizontal, es solo para mostrar como quedarían en caso de utilizar el truco proporcionado por betatrucos.blogspot.com, al ejecutar el código anterior las etiquetas solo se verian en forma vertical.

**"Recorte" el código de las imágenes, porque hacian correr la columna de la derecha hacia abajo, (solo lo coloque como ejemplo de hasta donde copiar el código del menu); asi que es mejor que lo copien completo desde csspicstock.blogspot.com.

11 comentarios:

Susy dijo...

Bueno, pues te voy a poner en mis favoritos por que de esto no se nada y siempre voy tirando de los sabios.

Un abrazo fuerte y gracias.

Anónimo dijo...

hola mira ese truco yo lo he encontrado y he encontrado 14 de esas verticales a si que si voz las queres ver todas a mi blog los proximos dias XD

ICARO NOCTURNO dijo...

Hola

Gracias susy por el cumplido, espero poder ayudarte en lo que pueda, solo decirte que los "trucos", en su mayoria los he sacado,hasta el momento, de betatrucos.blogspot.com.

lyonel tienes razón existen 14 de esas verticales,(en el post las mencione),el truco fue sacado desde:
http://csspicstock.blogspot.com/2006/09/this-is-pic-stock-for-project-exploding.html (aunque voy a editar el post para colocar dentro de una caja el código,ya que no esta completo,debido a la explicación que doy en el post).

Abrazos

Anónimo dijo...

http://templatesl.blogspot.com/

JRD dijo...

Compas: quiero poner mis etiquetas en forma de pestañas, pero la plantilla que utilizo es la que llaman "Tekka". El código que usan ustredes, ¿funciona sólo para la plantilla "Mínima?"

Agradedcería su ayuda, hermanos: duquejroberto@yahoo.com

JRD dijo...

Hermano, gracias a ti le cambié el aspecto a mi blog. Ya dejí de ser un blog frío e inexpresivo; ahora es un blog frío, inexpresivo y con buena pinta.
Gracias pues.

http://discursodeloeste.blogspot.com

Anónimo dijo...

No entiendo por qué no entré antes...

ICARO NOCTURNO dijo...

jrd: me agrada el haber podido ayudarte al blog frío,inexpresivo y con buena pinta.:)

ameslari dijo...

Hola!! me encanta tu blog, me parece muy util, da gusto ver como la gente comparte sus conocimientos, chapeau!

te escribo porque me estoy volviendo to picha ya que no consigo lograr este tipo de botones en concreto que dices;

http://img248.imageshack.us/img248/3113/sinttulo3zk1.gif

Llevo todo el dia de hoy y nada, te agradeceria algo de orientacion crack.


Un saludo!

ICARO NOCTURNO dijo...

Hola ameslari,deje un mensaje en tu blog,espero haberte ayudado.
Saludos!

ameslari dijo...

Gracias por contestarme, eso de primeras :)
Te copio aqui lo que te escribi en mi blog, por si no lo lees halla y te sea mas facil.

====================================
Hola icaro! gracias por molestarte en escribir, eso que me dices que aga ya lo e probe y requeteprobe, y me salen en este modo;

- Si lo pongo como tu dices, usease asi; (quiero que vayan bajo la imagen)

http://img466.imageshack.us/img466/8040/20916262tu7.gif

Me quedan asi;

http://img364.imageshack.us/img364/1810/44625274vl5.gif

Y yo quiero que me quede algo parecido a esto amigo;

http://img131.imageshack.us/img131/6057/95589046ef0.gif


GRACIAS, asi, con mayusculas por perder tu tiempo en intentar ayudarme, de verdad que se agradece gente con tan buen talante ;)
====================================