Anuncios Patrocinados






Enlaces Patrocinados






Como colocar categorías (Etiquetas) en forma de pestañas, Blogger


Lo primero que deben hacer es colocar un gadget con las etiquetas, si es que no lo tienen. Para eso deben ir a Diseño, Elementos de pagina, y agregan gadget, ahí deben Añadir un gadget "Etiquetas" que se encuentra en la lista que aparecerá.

etiquetas_tabs_1.JPG

Luego debemos ir a Edicion de html, y seleccionar el cuadro de Expandir Artilugios.

etiquetas_tabs_2.JPG

Ahora busquemos en el código la parte que dice:

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

Y la sustituimos por:

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

Ahora tenemos que buscar la parte que dice

]]></b:skin>

Y justo arriba de esto pegar 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;
}

Finalmente debemos buscar y sustituir el 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>

Por lo siguiente:

<b:widget id='Label1' locked='false' title='Etiquetas' 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>
</div>
</b:includable>
</b:widget>

Y Listo!! La plantilla esta lista, si queremos que esto aparezca en la parte superior del blog solo debemos arrastrarlo de la sidebar hacia la parte superior, esto debes hacerlo en Elementos de pagina donde verás todas las secciones de tu blog:

etiquetas_tabs_3.JPG

Este es el resultado en un blog de pruebas, con la plantilla minima blue:

etiquetas_tabs_4.JPG

Puedes descargar la plantilla Minima Blue con los cambios ya realizados:
Descargar (boton derecho de mouse, guardar como...)

7 Responses to “Como colocar categorías (Etiquetas) en forma de pestañas, Blogger”

  1. me interesa mucho hacer esto en mi web, pero despues de copiar el ultimo codigo que indicais, no me deja guardar la plantilla y me dice esto:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type “b:section” must be terminated by the matching end-tag “”.

  2. yo tengo el mismo problema que raul,
    y me e descargado la plantilla Minima Blue
    pero entre el titulo de la entrada y el cuerpo
    me sale como un anuncio, me podriais decir como
    hacer para que no me salga el anuncio?

    gracias.

  3. A mí me ocurre lo mismo que a mis compañeros.

    Un saludo

  4. Saludos me gustaría añadir a mi blog un menú de opciones,y algún detalle mas por favor como podría hacerlo, llevo aproximadamente 10 meses con el blog y tengo 37 entradas.

  5. Hola no me habéis constestado

  6. fernando…no se cual es tu pregunta…. probablemente se fue como spam

  7. Me presenta el mismo problema que a los demas
    Muchas gracias por la ayuda que me puedan prestar

Añadir un comentario.

Debes haber iniciado sesión para enviar un comentario.

Categorías

Chat

De todo

Licencia

Esta prohibido copiar articulos, modificarlos y usarlos como propios. Esta obra tiene derechos reservados.
  • Partner links