Categorias en forma de Pestañas para Blogger

Bueno amigos Hoctro's Place nos trae un nuevo hack, es un poco complicado. Vamos a realizarlo: 0. Etiquetar nuestros posts, si no sabes como visitad: http://help.blogger.com/bin/answer.py?answer=44498&topic=9084 1. Dirigirnos a: Plantilla--Edicion de Html--Expandir plantillas de artilugios 2. Modificar esta linea:

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

por esta:

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

3. Antes de: ]]></b:skin> colocar este codigo:

/*- 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. Por ultimo buscamos el siguiente codigo:

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

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

Listo ya tenemos nuestras categorias en forma de pestañas. Nota: Antes de realizar el paso 4 necesitamos añadir las Eiquetas al blog ¿Como? Nos dirigimos a: Plantilla--Elementos de la pagina--Añadir nuevo elemento de pagina, y añadimos las Etiquetas

Technorati : Categorias en forma de Pestañas para Blogger Beta