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