Etiquetas en forma de pestaña para Blogger

Casi, casi un tutorial.... jajaja

Bueno Alicia, aquí vamos...

1. Me baso en la nueva versión de Blogger... (espero que hayas actualizado tu plantilla). Aunque no estoy del todo seguro porque veo que tienes un blog de tres columnas. De todas maneras lo que tienes que hacer en cualquier caso es buscar los códigos que están tb en la antigüa versión de Blogger

2. Suponiendo que lo has actualizado. Seria más o menos así...

3. Entras en Blogger “Plantilla”, “Elementos de página”, “Añadir un elemento de página”.

4. Al clikear este último se abre una ventana, buscas allí “Etiquetas” y haz clik en “Añadir al blog”, se abre esta

ventana:

NO coloques nada en título, a menos que quieras que aparezca algún título. Haces clik en “Guardar cambios”

5. Debes asegurarte que los cambios fueron guardados, para ello haz clik en “Guardar” en la ventana que queda luego de la acción anterior:

6. Ahora en esa misma ventana vas a “Plantilla”, “Edición de HTML”-

7. Haz clik en “Expandir plantillas de artilugios”

4.Busca el siguiente código:

]]></b:skin> </head>

5. Justo antes de él, pega este otro:

/*- Menu Tabs F */

#tabsF {float:left;width:100%;

font-size:80%;line-height:normal;border-bottom:2px solid #38B63C;

}#tabsF ul {margin:0;padding:10px 10px 0 0px;list-style:none;}#tabsF li {display:inline;margin:0;padding:0;}#tabsF a {float:left;background:url("http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;margin:0;padding:0 0 0 4px;text-decoration:none;}#tabsF a span {float:left;display:block;background:url("http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;padding:5px 15px 4px 16px;color:#cc0000;}/* Commented Backslash Hack hides rule from IE5-Mac */#tabsF a span {float:none;}/* End IE5-Mac hack */#tabsF a:hover span {color:#38B63C;}#tabsF a:hover {background-position:0% -42px;}#tabsF a:hover span {background-position:100% -42px;}

Importante: Ten presente que aquí estamos determinando los colores y dimensiones de texto que tendrá el contenido

de la solapa. En otras palabras son los que determiné para mi blog. Si no te gustan... bueno vamos a necesitar otro tutorial... jajaja

6. Pero no teminamos con la búsqueda. Apenitas más abajo del código que buscamos anteriormente vas a encontrar este otro:

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

Y lo reemplazas por:

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

Importante:Recuerda que el número “3” especifica la cantidad de etiquetas que quieres incorporar. Si deseas más de tres escribe el número allí, reemplazando al tres. Pero, si colocas demasiadas etiquetas, trata que los nombres que utilices para ello sean cortos, en lo posible una sola palabra, por una cuestión de espacio. En otras palabras se complica la confguración para los “novatos” como nos.

Seguimos buscando?...

7. Bastante más abajo (te pego una imagen para que tengas una idea, observá el cursor de la barra lateral

izquierda del cuadro de códigos) encontrarás ésto:

<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>

Cuando lo encuentres, lo cambias por:

<b:widget id='Label1' locked='false' title='Etiquetas' 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>

8. Si este tutorial sirvió a su cometido vas a editar alguna de tus entradas y agregas el nombre de una etiqueta, por ejemplo: “Prueba”

Luego haces clik en “Publicar” y cuando vas a “Ver Blog” deberían aparecer dos solapas (porque veo que en tu blog todavía no utilizas etiquetas):

Y luego más a medida que las vayas agregando.Aparecen en la columna izquierda pero si tienes la nueva versión de blogger la puedes desplazar al lugar que vos quieras con solo hacer clik, sostener y mover el mouse.

Los códigos los saqué de: http://betatrucos.blogspot.com/2006/11/categorias-en-forma-de-pestaas-para.html

Pero tuve que modificar valores para poder adaptarlos a mi blog. Tenía problemas con el tamaño de las pestañas. NO fue nada facil descubrir que numeritos modificar!!!Lo que te paso son mis valores.

Bueno Alicia esto es todo...

Suerte!!!