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.
Poner etiquetas a nuestros posts es bastante sencillo:
Cada vez que escribimos una nueva entrada, vemos debajo del editor de texto un apartado de "Opciones de entrada" y destacado en negrita "Etiquetas de esta entrada", es justo ahí, donde pondremos nuestras etiquetas. Puede ser una sola o varias, siempre separadas por comas. Si ya has etiquetado algún posts anteriormente, tienes la opción de "Mostrar todo" para escoger una de las etiquetas existentes con solo hacer click sobre ella.
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í.
Si os apetece probar con otros modelos, podéis verlos en exploding boy, pinchando sobre ellos en esa misma página con el botón derecho, escoges "ver código fuente" y tendrás el código CSS para cada uno de los menús del ejemplo.
