Pestañas para blog

+/- Sigue leyendo


Vamos a poner pestañas en el blog es uno de los detalles que mas me ha gustado. Se trata de ordenar tus secciones del blog por pestañas. Antes de empezar lo primero es etiquetar tus entradas.


1ª paso
Etiquetar tus entradas
2º Paso
Nos dirigimos a: Plantilla-Edicion de Html-Expandir plantillas de artilugios


3º Paso:


Apretamos CONTROL+F y buscamos el siguiente código: ]]></b:skin>


Antes de ]]></b:skin> copiamos 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;
}


4º Paso:


Buscamos este código (quizás no sea igual tu código a este, en ese caso busca uno que sea lo más parecido posible)...:


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


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



5º Paso:


Ahora guardamos los cambios y nos vamos a: Plantilla-Elementos de página-Añadir nuevo elemento-Etiquetas

Con la técnica del Drag ‘n drop podemos arrastrar y soltar con el ratón el lugar donde queremos colocar las pestañas.
Finalmente se nos ha de quedar algo como esto.
6º Paso:
Este paso es optativo, para aquellos que quieran darle una imagen distinta a las pestañas.
Si nos vamos a esta página: http://www.anniyalogam.com/labeltabs/ podremos ver distintos aspectos de bordes de etiquetas y de etiquetas. Aquí podemos elegir el que más nos guste y para cambiarlo tenemos que ir a la parte que está en rojo (en el tercer paso) y cambiarlo. El primer código que está en rojo se refiere a los bordes y el segundo al cuerpo de la etiqueta.
Espero que os valla bien.




2 comentarios:

Gem@ dijo...

Esta muy bien ;)

Miguel nev dijo...

Gracias Gem@,y mas viniendo de ti que tienes un blog que me ayudado mucho.
Nos vemos
Saludos

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja un enlace a tu blog: