You are on page 1of 3

Pestañas para el blog

1º Paso:
Etiquetar tus entradas.
2º Paso:
Nos dirigimos a: Plantilla-Edicion de Html-Expandir plantillas de artilugios
3º Paso:
Apretamos CONTROL+F y buscamos el siguiente código: ]]></b:skin>
Antes de ]]></b:skin> copiamos este código

/*- Menu Tabs F */

#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid #000;

}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
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 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
4º Paso:

Buscamos este código (quizás no sea igual tu código a este, en ese caso busca
uno que sea lo más parecido posible)...:

<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 lo cambiamos por este otro:

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

OJO puede suceder que en tu plantilla no esté el código (el primero que aparece
en este paso). En ese caso has de irte casi al final de tu plantilla html (la verdad
que no se en que parte exactamente) y copiar el segundo código de este paso,
debajo de un código tal como </b:includable> </b:widget&gt. Hay varios en la
plantilla.
5º Paso:
Ahora guardamos los cambios y nos vamos a: Plantilla-Elementos de página-
Añadir nuevo elemento-Etiquetas
Con la técnica del Drag ‘n drop podemos arrastrar y soltar con el ratón el lugar
donde queremos colocar las pestañas.
Finalmente se nos ha de quedar algo como esto.

6º Paso:
Este paso es optativo, para aquellos que quieran darle una imagen distinta a las
pestañas.
Si nos vamos a esta página: http://www.anniyalogam.com/labeltabs/ podremos
ver distintos aspectos de bordes de etiquetas y de etiquetas. Aquí podemos elegir
el que más nos guste y para cambiarlo tenemos que ir a la parte que está en rojo
(en el tercer paso) y cambiarlo. El primer código que está en rojo se refiere a los
bordes y el segundo al cuerpo de la etiqueta.

You might also like