Menú en forma de pestañas en Blogger

Menú en forma de pestañas en Blogger

He recibido varios emails donde me solicitaban ayuda para conseguir poner el menu en el blog tal como lo tengo yo, en forma de pestañas en la parte superior de la página.
He de deciros que yo lo conseguí siguiendo los pasos de Trucos Blogger que a su vez tomó la idea de Hoctro's Place, aclarado este punto,sigamos con lo nuestro...
Antes de empezar has de tener etiquetados todos tus post sino es imposible que puedas colocar las pestañas.
1- Vamos a la Plantilla en Edicion de Html y Expandimos las plantillas de artilugios.
2- Buscamos este trozo de código: <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> y lo cambiamos por este otro:
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">
3-Justo antes de: ]]></b:skin> colocamos este codigo completo:

/*- 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://3.bp.blogspot.com/_8PJ-pgoBhWQ/Sf9qIJ35QkI/AAAAAAAAGxQ/t48-cC0Ogkk/s400/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://1.bp.blogspot.com/_8PJ-pgoBhWQ/Sf9qMJVnJmI/AAAAAAAAGxY/K6ntns2CUvI/s400/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- Guardamos cambios.
En este momento añadimos las etiquetas al blog.
Nos dirigimos a la Plantilla--Elementos de la pagina--Añadir nuevo elemento de pagina, y añadimos las Etiquetas.
5- 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>

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>

6- ¡Ya está listo! Si todo ha ido bien, las pestañas deberían estar situadas en el sidebar de nuestro blog, solo queda moverlas a la parte superior arrastrándolas hacia allí.

Nos leemos en el siguiente tutorial