13 mayo 2007

PESTAÑAS PARA TU BLOG

Este ha sido uno de los trucos que estuve buscando y esperaba encontrarlo como agua de mayo. 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>



OJO puede suceder que en tu plantilla no esté el código (el primero que aparece en este paso). En ese caso has de irte casi al final de tu plantilla html (la verdad que no se en que parte exactamente) y copiar el segundo código de este paso, debajo de un código tal como </b:includable> </b:widget>. Hay varios en la plantilla.


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.

Animo y suerte.

11 comentarios:

Blani dijo...

OOOOLA MOISES!!!! Esta es un entrada útil, y con poco de ayuda conseguí cambiar mi blog también yo. Así q está bieeeeen explicado!! muy bien Moises. Saludos Blani

Moisés dijo...

Hola Blanka. Me alegro que te haya funcionado. Espero que alguien más alegre el blog con las pestañas. Un saludo, se buena.

Anónimo dijo...

hola probe con los pasos que dices para colocar las pestañas pero no logro realizarlo; ya sigui todos los pasos pero me falta el 4, si me podes ayduar te lo agradeceria muchisimo, estoy usando la plantilla:Minima Black
Designer: Douglas Bowman

Moisés dijo...

hola, al final de la plantilla html busca </b:includable> </b:widget&gt.
e inserta el código que está en el segundo recuadro del paso 4.
Si no encuentras </b:includable> </b:widget&gt. pues se me ocurre que pegues el código donde te parezca al final de la plantilla.
Para buscar códigos por la plantilla html lo mejor es que apretes CONTROL+f y copies ahí lo que quieres buscar.
Espero que te funcione, ya me contarás.
Saludos

Anónimo dijo...

No me sale no me quedan los botones ;

Anónimo dijo...

Perdon ya lo solicone Quedo terrible
Ahora como hago para darle el orden que yo quiero???

Moisés dijo...

Hola xpucho, ¿qué significa que quedó terrible?
Respecto a darle un orden te diré que ahí ya me pierdo, no se como darle un orden a las pestañas. A mí me las puso automaticamente en el orden que quiso...
Saludos.

Anónimo dijo...

que me gusto como quedo, eso quiere deceir

Moisés dijo...

ok, perfect ;)

Lili dijo...

Hola !

Pues yo no lo consigo. Debes tener escritas bastantes entradas para que funcione?

Cuando ya he realizado los cambios, la plantilla no se puede guradar porque me dice que sólo puede haber una Label1.

Voy a volver a intentarlo.

Levi dijo...

Hola, amigo.
Muy útil me ha sido de gran ayuda, pero a la hora de intentar cambiar los botones pues la dirección que das no me resulta nada que tenga que ver con lo que tu describes...
Podrías por favor darle una mirada...

Cargando