-->

domingo, 25 de febrero de 2007

Etiquetas en forma de botones

Hace un tiempo, en el post "Pestañas para blogger beta" expliqué cómo hacer para que las etiquetas de nuestro blog aparecieran en forma de pestañas. Pues bien, esta vez, y a petición de Bexza lo que haremos será convertir nuestras etiquetas en botones, como las que tengo en mi barra lateral. El procedimiento es el mismo pero cambiando algunas cosas, así que repetiré los pasos que son iguales e introduciré los cambios (en color verde) que teneis que hacer para que os aparezcan en forma de botones.

1. Etiquetamos todos los posts en categorías.

2. Nos dirigimos a
Plantilla /Elementos de la página. Añadimos el elemento de página "Etiquetas", y lo colocamos donde queramos; o bien debajo del título como yo he hecho o bien en la barra lateral.

3. A continuación entramos en
Plantilla /Edición de HTML y marcamos la opción "Expandir plantillas de artilugios".

4. Buscamos esta línea de código:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Y la sustituimos por esta:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

5.
Luego buscamos:]]></b:skin> y justo antes añadiremos uno de los códigos que podemos encontrar en csspicstock.blogspot.com. Hay 14 diseños donde elegir. Yo elegí el 14, con lo cual añadí el siguiente código:

/*- Menu 14--------------------------- */


#menu14 {
width: 200px;
margin: 10px;
}

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

#menu14 li a:link, #menu14 li a:visited {
color: #333;
display: block;
background: url(http://photos1.blogger.com/
blogger2/3729/970792021505273/1600/menu14.gif);
padding: 8px 0 0 10px;
}

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


6.
Por último nos situaremos en esta parte de código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Y la reemplazaremos por esta otra, teniendo en cuenta que cambiaremos tabsF por (en mi caso) menu14.

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>

<b:loop values='data:labels' var='label'>

<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>

</b:loop>

</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Espero que os haya servido de ayuda. Si teneis alguna duda o algo no os funciona sólo teneis que decirlo.
Saludos!


14 comentarios:

Bexza dijo...

DIOSSS! que velocodad de respuesta jajaja GRACIAS mi corazon... ya me pongo en esto a ver como me va...
Saludos violetas...

Bexza dijo...

AMIGA LE CUENTO...TODO BIEN HASTA EL PASO 6, ESE COD COMO Q NO ESTA EN MI PLANTILLA, AQUI ME TRANQUE, LO BUSCO Y LO BUSCO Y NADA, LA TENGO IMPRESA Y TODO PARA FACILITAR LA BUSQUEDA PERO NADA...SERA Q EN MI PLANTILLA SE HACE DIEFERNTE? AHHHH :(

Bexza dijo...

CHAMA YA MI SOCIA J-ODA, ENTRO AQUI Y ESTA EN ESTO YA SE PORQ NO LO ENCONTRABA...JEJE... HACEMOS LAS PRUEBAS Y TE CUENTO...

produccionesdevanguardia dijo...

saludos estuve intentanto realizar lo de las etiquetas en forma de botones y no me funcionan segui los pasos cuidadosamente y no funciona mis categorias siguen estando igualitas espero puedas ayudarme...!!!

melanista dijo...

Hola! Necesito que me digas la dirección de tu blog para poder ver qué es lo que hace que no te funcione.
Y una pregunta más: usas Blogger Beta? La mayoría de mis trucos sólo funcionan en la nueva versión de Blogger.
Un saludo.

produccionesdevanguardia dijo...

mi direcciones esta http://emergenciaserieweb.blogspot.com/
espero que puedas ayudarme de verdad es importante que solucione ese problema saludos...

melanista dijo...

La verdad es que en tu plantilla no encuentro ninguno de los códigos que explico en el tutorial. Has debido modificar o borrar alguna parte del código porque a la plantilla le faltan partes. Lo siento pero con esa plantilla no puedo ayudarte; te recomiendo que empieces de nuevo con una Minima y no borres nada del código. Vuelve a etiquetar las entradas y aplica mi truco.
Siento no poder hacer nada más, saludos!

produccionesdevanguardia dijo...

gracias por el concejo tenias razon empece de nuevo y si funciono ahora espero que me funcionen las demas cosas, otra pregunta y disculpa la molestia,como puedo hacer para enlazar mis etiquetas en forma de pestañas a otro blog diferente, me explico lo que quiero hacer es que cuando se clique en una pestaña me lleve a otro blog donde esta esa informacion y no al mismo blog por que las entradas las necesito en otro blog y no en el principal espero que si se pueda..!! saludos de nuevo

EmmaPeel dijo...

Buenos días! cómo hago esto si al mudar mi blog a la nuev aversión no opté por personalizar plantilla?

Me sigo manejando con la plantilla habitual y no figuran estos códigos

Gracias!

melanista dijo...

Emmapeel, todos los trucos que encontrarás en este blog están probados en la versión nueva de Blogger, por lo que no aseguramos que funcionen en la antigua versión.
Un saludo.

Anónimo dijo...

No hayo el primer codigo que mencionas, ¿mas o menos donde esta?.
espero que puedas ayudarme.
Saludos

melanista dijo...

Hola Fernando. En primer lugar decirte que para localizar más rápidamente un código pulsa CTRL+F y pega el código que quieras buscar (por lo menos con firefox funciona). En segundo lugar decirte que ya he rectificado el fallo que había en el primer código. Simplemente había que cambiar las dobles comillas ('') por una sóla ('), como ves.
Espero que ahora te funcione.
Saludos!

EL TREMOLO FLANGER dijo...

Hola que tal efecinco, aplique los cambios pero mis etiquetas siguen igual, lo unico que cambio es k cuando el cursor pasa sobre ellas cambian de color a un blanco, ese es el efecto del truco ????'''

De antemano gracias por los tips
te dejo la direccion de mi blog pa k schekes que peexx

http:tremoloflanger.blogspot.com

El G@m€ dijo...

Eyyy Grax... se ve con maiz, pra editar uso wordpad por el modo de busqueda que tiene con Ctrl+B jaja

 
Copyright © 2007 | Diseñado por BlogyWeb