-->

sábado, 13 de enero de 2007

Pestañas para Blogger Beta

Gracias al tutorial que he leido en Gem@ Blog he puesto las categorías del blog en la parte superior y en forma de pestañas. Me gusta bastante como ha quedado el resultado final, aunque si alguien tiene alguna sugerencia que se la meta por el... que nooooooo, en serio, se admiten y se agradecen todo tipo de críticas y/o sugerencias ^^

Por si alguien se anima a hacerlo en su blog aquí os dejo los pasos, es muy sencillo:

1. Etiquetamos todos los posts en categorías.

2. Nos dirigimos a Plantilla /Elementos de la página. Añadimos el elemento de página "Etiquetas", y lo colocamos donde queramos; o bien debajo del título como yo he hecho o bien en la barra lateral.

3. A continuación entramos en Plantilla /Edición de HTML y marcamos la opción "Expandir plantillas de artilugios".

4. Buscamos esta línea de código:

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

Y la sustituimos por esta:

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

5. Luego buscamos:]]></b:skin> y justo antes añadiremos 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;

6.
Por último nos situaremos en esta parte de 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>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Y la reemplazaremos por esta otra:

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

Y eso es todo, espero que os sirva de ayuda. Por último darle las gracias a Gem@ y a Ícaro por su ayuda.


7 comentarios:

Kroki dijo...

Queda muy bien, me gusta!!
Como te lo curras!
Un beso!!

efecinco dijo...

Gracias, jeje ^_^

Álvaro dijo...

Pues si, quedar quedan muy bien, la verdad... aunque creo que no estoy mucho por "tunear" xD mi blog de momento, con poner alguna entrada que otra de vez en cuando (la última semana he andado un poco dejado -_-U ).

Y respondiendo cosas pendientes... He votado que no tengo webcam, básicamente porque es verdad, lo siento... º_º y mira que resultaría divertido e interesante lo de las fotos xD

Tambien mira que me pasan cosas raras que desde hace unos días no me sale el tagboard de tu página (el de la mía si... ¡y es del mismo sitio! :S ).

Y qué era lo otro?? .... Ah, si! lo de Mimi, pues no es por su paso televisivo ni nada de productoras, sino que parece que a ella le dio por borrarlos cuando salió, yo creo que para no ver los insultos y tonterías que muchos habían escrito (creo que según ella los quitó para no mezclar lo de la tele con su afición al manga, anime, las muñecas y esas cosas).

Aún asi sigue escribiendo de vez en cuando en el blog que le hicieron sus amigos durante el concurso, que supongo que habrás visitado alguna vez si has tenido curiosidad xD

Pues creo que nada más, por ahora... ah, si, que lo de menear el pie y la mano al mismo tiempo que no me sale, que poca coordinación!! xDDDD jeje

Saludos, saludos ^^

ガルシア マルタ dijo...

Wow, llevaba mucho tiempo buscando cómo crear etiquetas en blogger y, además, ya estoy en la versión beta... así que tu post me va a ser de muchísima ayuda. ¡Gracias!

vichetti dijo...

hola amigo muchisumas gracias pensaba que no iba a funcionar pero si te agradesco muchisimo

Alvaro dijo...

La verdad me encanta, pero tengo tantas etiquetas que queda mal...

Kasafia dijo...

he tratado de poner una barra de menus y sigo todos los pasos, pero que pasa si siempre mencionan ubicar las etiquetas /b:includable>
/b:widget> (en todo mi codigo html no se encuentran, que hago si no viene mi plantilla? porque no viene en mi plantilla eso? todos los manuales lo mencionan)a lo mucho encontre b:widget> pero cierra con
/b:section ... y ni luces de la etiqueta /b:includable, ni siquiera existe a palabra "includable" en todo el html .... que hacer? ... estoy usando una plantilla simple y no tiene widgets instalados para que se complique ... si tienen respuestas gracias ... (no me deja poner los signos <...> correctos aqui ... pero los escribi bien las etiquetas con sus apertura y cierre )

 
Copyright © 2007 | Diseñado por BlogyWeb