Buscar

5.20.2011

Crear menú de pestañas con las etiquetas del blog

Sigo recopilando manuales para la construcción de blogs en blogger y aquí va otra curiosidad más, espero que les sirva:



Lo primero que deben hacer es colocar un gadget con las etiquetas, si es que no lo tienen. Para eso deben ir a DiseñoElementos de pagina, y agregan gadget, ahí deben Añadir un gadget "Etiquetas" que se encuentra en la lista que aparecerá.


etiquetas_tabs_1.JPG

Luego debemos ir a Edicion de html, y seleccionar el cuadro de Expandir Artilugios.



etiquetas_tabs_2.JPG

Ahora busquemos en el código la parte que dice:



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

Y la sustituimos por:



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

Ahora tenemos que buscar la parte que dice



]]></b:skin>

Y justo arriba de esto pegar 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;
}

Finalmente debemos buscar y sustituir el 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>

Por lo siguiente:



<b:widget id='Label1' locked='false' title='Etiquetas' 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>
</div>
</b:includable>
</b:widget>

Y Listo!! La plantilla esta lista, si queremos que esto aparezca en la parte superior del blog solo debemos arrastrarlo de la sidebar hacia la parte superior, esto debes hacerlo enElementos de pagina donde verás todas las secciones de tu blog:



etiquetas_tabs_3.JPG

Este es el resultado en un blog de pruebas, con la plantilla minima blue:



etiquetas_tabs_4.JPG

By Martin 




Pixmania: tus cartuchos de tinta al mejor precio.

No hay comentarios:

Publicar un comentario