Pestañas para Blogger Beta

Gracias al tutorial que he leido en Gem@ Blog he puesto las categorías del blog en la parte superior y en forma de pestañas. Me gusta bastante como ha quedado el resultado final, aunque si alguien tiene alguna sugerencia que se la meta por el... que nooooooo, en serio, se admiten y se agradecen todo tipo de críticas y/o sugerencias ^^

Por si alguien se anima a hacerlo en su blog aquí os dejo los pasos, es muy sencillo:

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

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:

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

Y eso es todo, espero que os sirva de ayuda. Por último darle las gracias a Gem@ y a Ícaro por su ayuda.