Quickribbon

jueves, 1 de marzo de 2007

Mostrar categorías como "Etiquetas"

Recientemente he cambiado la plantilla de la página y he añadido un par de cosillas nuevas que aún no había pasado a comentar. La más llamativa, que ahora recuerdo haber puesto, son las categorías que veis bajo el título del blog, que como veis, son funcionales.

No es un truco especialmente complejo, pero si es fácil hacerse un lío y además necesita que se haya retocado la plantilla con un par de trucos previos. Lo primero es adecuar nuestra plantilla para que se puedan añadir widgests en la cabecera (ver enlace para saber como).

El siguiente paso es definir el estilo de las pestañas que vamos a añadir al blog. Podemos copiar sólo la parte de la pestaña que queramos, pero yo recomiendo copiar todo el código por si en algún momento queremos cambiar el diseño:


/*- Menu Tabs A --------------------------- */


#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs B--------------------------- */

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs D--------------------------- */

#tabsD {
float:left;
width:100%;
background:#FCF3F8;
font-size:93%;
line-height:normal;
border-bottom:1px solid #F4B7D6;
}
#tabsD ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftD.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightD.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#C7377D;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#C7377D;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs F--------------------------- */

#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#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;
}



/*- Menu Tabs G--------------------------- */

#tabsG {
float:left;
width:100%;
background:#666;
font-size:93%;
line-height:normal;
}
#tabsG ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li {
display:inline;
margin:0;
padding:0;
}
#tabsG a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftG.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightG.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
color:#FFF;
}
#tabsG a:hover {
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}


/*- Menu Tabs H--------------------------- */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}


/*- Menu Tabs I--------------------------- */

#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}


/*- Menu Tabs J--------------------------- */

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}


/*- Menu Tabs K--------------------------- */

#tabsK {
float:left;
width:100%;
background:#E7E5E2;
font-size:93%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
}
#tabsK a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}

Una vez tengamos el código, lo pegamos en nuestra plantilla justo encima de la etiqueta de cierre /b:skin que a su vez está encima del cierre de /HEAD (que este seguro que está más localizado a estas alturas ;) )

El último paso es el añadir el wisget en si a nuestra plantilla así que pegamos el código siguiente justo tras el cierre de cualquier widget (hay que trabajar con la plantilla con widgets expandidos)


<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</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 ya está listo, sólo hay que cambiar la letra en rojo por aquella que queramos para cambiar el estilo... siempre y cuando hayamos copiado todos los estilos a nuestra plantilla.


Problemas que puedan surgir:
Obviando los evidentes de errores al copiar o pegar el código en zonas erróneas de la plantilla, un problema habitual es que estemos intentando duplicar el widget label (porque ya existe en la plantilla un widget de etiquetas). Esto se puede solucionar renombrando el widget. (widget id=´"label2"... "label3"...etc).

Otra opción es, si no se van a tener varios sistemas de categorías a la vez, es eliminar las ya existentes antes de empezar.


Original de Hoctro

15 comentarios:

Batto dijo...

Todavia no lo he probado, pero con este truco se muestran TODAS las etiquetas? O es posible elegir las 3 o 4 que sólo quiras mostrar en los TABS/Botones de la cabecera?

Saludos

Zaebos dijo...

Muestra todas... es más, si creas una nueva también aparecerá. Es simplemente otra manera diferente de mostrar los labels de blogger

Batto dijo...

Es que yo no quiero mostrar todas :(.
Es decir yo creo etiquetas, como tags varios de búsqueda por lo que tengo mogollón en mi blog, y solo algunos me servirían como verdaderas categorías, no se si me explico.

Zaebos dijo...

Entonces te aconsejo que te crees un Mapa de Imagen con las categorías que quieras y lo situes bajo la cabecera

Batto dijo...

Cierto, eso tieene su sentido. ^_^x Gracias!

any dijo...

hola bueno primero que nada te felicito por tremendo blog, es muy personal desde la plantilla, cabecera y contenido no me acuerdo como llegue hasta aca suelo entrar a un blog y meterme en sus enlaces y en ese a sus enlaces, y asi sucesivamente..ja
pero ya te agende em mi listita de paginas joyitas.
bueno mi preguntita es la sig.
ya tengo una pagina q tiene esos "botoncitos" en el encabezado como hago para q funcionen es decir en inicio solo la pesentacion, en contacto algo q diga un email y tel,y asi sucesivamente si podes date una pasada x mi blog http://caprichosabuenosaires.blogspot.com talvez sea mas claro lo q intento decir.
bueno espero tu pronta respuesta, y no haber sido muy tediosa escribiendo
saludos desde buenos aires, argentina

any

Zaebos dijo...

any.. veo que ya tienes las pestañas hechas en la plantilla... lo único que tienes que hacer es crear para cada catergoría un enlace a la página que quieres... o bien, muestras la descripcion en un post.. por ejemplo "contacto" puedes crear un post en el que pongas los datos y luego deberás ir a la plantilla y cambiar la dirección de "contacto" por la del post que has creado... las pestañas que yo tengo son distintas.. se refieren a las categorías del blog y se redireccionan automaticamente... lo que tu tienes son vínculos que puedes hacer o bien a tus propios posts o bien a otras páginas... si quieres puedes crear para cada una de esas pestañas un blog auxiliar y dirigir cada una de ellas al blog que corresponde.

any dijo...

gracias x tu respuesta ya lo he solucionado
rimero lo que hice fue crear post que agrupé en una misma etiqueta como por ej. blog y despues fui a la plantilla y puse la url de las entradas con etiqueta blog.
gracias igualmente

Lilith (Nefesh) dijo...

Hola. He hecho pruebas con lo de añadir páginas al blog, pero la verdad no logro que se vean como pestañas, sino sólo como links.
Tu página me ayudó a que quedaran por fin en la cabecera, pero eso no basta para que se dejen de mostrar como links... ¿Alguna sugerencia? Lo del mapa con imágenes ¿en qué programa debería hacerlo? Gracias.

Esta es mi página http://extranjeraenmicuerpo.blogspot.com

Adriana del Moral dijo...

.

Anónimo dijo...

The bеlt could be ωorn ωherеver sο yοu сan gеt a eхcеllеnt funсtiοn out
taκing а cat nap or wаshing рrοреrtу.


Ѕtop by my blog :: The Flex belt

Anónimo dijo...

With a teгrifіс consumeг sегvice, іnitіally this
was developed as a preventive cгeam for stretch
marks.

My ωebsitе more...

Anónimo dijo...

cоntinuοuslу і used to гeаԁ smаller агticles that
as well cleаr their mοtive, and that is alsо happеning
wіth this parаgгaph which I am гeading herе.


mу sitе - blucig

Anónimo dijo...

Revіtol cream is faг far more of a pгevеntatiνe гather than а reѕolution.


My site: childfamilypractices.ca

Anónimo dijo...

They take pleasure in the smoking encounter, but they don't appreciate the many wellness problems that are connected with smoking. Starter packs are packages that contain almost everything that you need to start effectively smoking your electronic cigarette. A enjoyable sighting there was Peter Mensa from Accurate Blood acquiring a facial from Renaud Paris. That may be a very essential matter. He also provides advices to folks who necessary it, and provides an unbiased comment relating to the items in the marketplace nowadays.

Visit my webpage www.prnewswire.com

Template Designed by Douglas Bowman - Updated to New Blogger by: Blogger Team
Modified for 3-Column Layout by Hoctro
Re Updated by Zona de Pruebas