sábado, 20 de marzo de 2010

¿Como poner pestañas a tu blog?

Nuevamente, algo mas para personalizar tu blog (este acabo de probarlo) todos los derechos de este procedimiento no son de mi autoridad, solo estoy comunicándolo sin obtener beneficios, ya que eso quedo claro: procedamos

Primero que todo, necesitan tener todas sus publicaciones etiquetadas (categorías) o van a tener problemas; si no saben lo que es una categoría, es la misma Etiqueta que se le pone a las publicaciones abajo antes de enviarlas, ayuda mucho para mantener un orden y al momento de que nuestros visitantes deseen información en cierta categoría.

Como la mayoría de arreglos en el blog, debemos dirigirnos a la edición HTML de la plantilla en la sección "Personalizar" o "Diseño"

* Seleccionamos la opcion "Habilitar plantillas de Artilugios"
* Buscamos el codigo: -class='header'- (en algunos casos estará en comillas dobles, tengan cuidado de mantener eso)
* El contenido de esa seccion contiene las propiedades maxwidgets="1" y showaddelement="no", las modificamos para que sean "2" y "yes" respectivamente
* Ahora, buscamos el codigo ]]></b:skin> y justo antes de dicho codigo, agregamos TODO esto:

/*- 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;
}


* Guardamos los cambios y nos dirigimos a la seccion de diseño, donde agregamos los gadgets: entonces seleccionamos la opción de agregar uno nuevo (recomiendo ubicarlo en la parte superior debajo del encabezado) y escogemos "Etiquetas". Guardamos y regresamos a edicion HTML
* Buscamos (con artilugios habilitados) 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 reemplazamos con:

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


Eso es todo! ahora al guardar y actualizar, veremos en la parte superior sobre las entradas, un menu de etiquetas con nuestors temas... cabe mencionar que si no somos muy ordenados y tenemos muchas, será grande y no se vera bien, si desean cambiar el estilo de las pestañas, pueden encontrar mas ayuda AQUI

Espero sus comentarios

No hay comentarios: