OCULTAR MENU LATERAL >>

Añadir pestañas al blog de Blogger

Para añadir una barra superior con botones que ordene nuestros artículos según el tema sólo hay que seguir los siguientes pasos y consideraciones:
NOTA: Yo ya no utilizo dicha barra, uso un menú desplegable, por lo que no podéis tomar mi blog de ejemplo para saber como quedaría.

CONSIDERACIONES PREVIAS:
  • Cada pestaña corresponde a cada una de las "etiquetas" que posee el blog. Si en el blog dichas etiquetas están siendo usadas para otro fin se recomienda no añadir esta barra de botones.
    NOTA: Para añadir una etiqueta basta con rellenar, cuando estamos editando o creando una entrada, el campo llamado Etiquetas de esta entrada con el nombre de la entrada a crear.
  • En la barra se añadirá por defecto una pestaña "Inicio" que enlazará con la página de inicio del blog. En cada una de las demás pestañas se incluirán aquellas entradas que fueron etiquetadas con el nombre de dicha pestaña. Se recomienda etiquetar varias entradas previamente para que la barra sea mostrada correctamente.

CREACIÓN DE LA BARRA DE PESTAÑAS:
  1. Añadimos un nuevo Gadget:

    Entramos a Personalizar el blog y vamos a Diseño-->Elementos de la página.
    Una vez allí, damos a Añadir un gadget en la columna auxiliar.
    Se abrirá otra ventana del explorador ofreciendo diversos gadgets; elegimos el llamado Etiquetas.
    Guardamos cambios.

  2. Activamos la opción de despliegue:

    Ir a Diseño-->Edición de HTML.
    Marcamos la opción Expandir plantillas de artilugios, situada en la parte superior derecha del cuadro del código HTML.
    Bucamos dentro del código la línea siguiente:
    <b:section class="header" id="header" maxwidgets="1" showaddelement="no"></b:section>
    Y la sustituimos por:
    <b:section class="header" id="header" maxwidgets="2" showaddelement="yes"></b:section>

  3. Añadimos la configuración al CSS de la plantilla del blog:

    Bucamos dentro del código la línea siguiente:
    ]]>
    Y añadimos, justo antes, el código correspondiente según el diseño de botones o pestañas que elijamos. En mi caso el código que añadí fue el siguiente (para obtener un fichero con otros diseños podemos descargarlo de este enlace):
    /*- Menu Tabs F-------------PRINCIPIO---------- */
    #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 F-----------FIN------------------ */

  4. Añadimos el código necesario a la plantilla del blog:

    Buscamos la siguiente porción de codigo (podría variar un poco, pero las primeras y últimas líneas sí son iguales):
    <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 expr:class='"widget-content " + data:display + "-label-widget-content"'>
    <b:if cond='data:display == "list"'>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name&/gt;</a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </li>
    </b:loop>
    </ul>
    <b:else/>
    <b:loop values='data:labels' var='label'>
    <span expr:class='"label-size label-size-" + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a/gt;>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </span>
    </b:loop>
    </b:if>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
    
    Y lo sustituimos por el siguiente:
    /* -------Codigo añadido para las pestañas-----PRINCIPIO--- */
    <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>
    <!--<b:include name='quickedit'/>-->
    </div>
    </b:includable>
    </b:widget>
    /* -------Codigo añadido para las pestañas-----FIN--- */
    
    Guardamos la plantilla.

  5. Colocamos el gadget (osea la barra de pestañas) donde deseemos en el blog:

    Volvemos a Diseño-->Elementos de la página y colocamos la barra de botones bajo el título (o donde deseemos que permanezca realmente).

    Guardamos y ya tenemos nuestra flamante barrita de accesos.


Salu2,
elSant0

ALGUNOS ARTICULOS RELACIONADOS

10 comentarios:

Lidia dijo...

Gracias por la aportación! El problema es que me funciona en Explorer pero no en Chrome ni en Mozilla, ¿ a qué puede ser debido?

elSant0 dijo...

Que tal Lidia. ¿cual es el comportamiento anómalo que hay en Chrome y en Mozilla?
Este hack es un poco viejo y llevo tiempo sin probarlo, pero a simple vista el código parece seguir siendo válido. De todos modos, por si te interesa, puedes echarle un vistazo a este otro: Añadir Menú. Es el que uso yo actualmente y es tanto o más personalizable.

Salu2

Lidia dijo...

Gracias por contestar. Lo que ocurre es que aparecen las pestañas, pero no funcionan, no se puede acceder a ellas, si tienes alguno de estos exploradores puedes comprobarlo: http://me-lo-apunto.blogspot.com/
Lo que me mosquea es que en IE sí que funcionan. Le pegaré un vistazo a ese otro enlace que has puesto, gracias de nuevo.

Lidia dijo...

Lo he conseguido elSantO!!!! Me parecía un poco complicado el sistema de menú superior pero ayer tarde me puse y lo conseguí :) Igual falta acabarlo de retocar pero en general ya está hecho. Lo único que me faltaría es poner las etiquetas en mayúsculas, a ver si lo averiguo.
Muchas gracias por la info y los detalles de que es cada cosa!

elSant0 dijo...

Lidia@ Veo que al final te quedaste con el menú ;) Te está quedando muy bien el blog. Por cierto, para conseguir lo que quieres con el texto busca info sobre: "text-transform:capitalize;", "text-transform:lowercase;", "text-transform:uppercase;" y "text-transform: none;".

Salu2

Lidia dijo...

Okis y graciaaaaasss!

Lidia dijo...

He cantado victoria antes de hora :(
Mi última pestaña no se abre ni en el Mozilla ni en el Chrome, que cosas más raras porque en IE si me la abre.

Lidia dijo...

Solo funciona en el bordecito de la izquierda, jaja, que pesada soy
.

elSant0 dijo...

Lidia@ Jeje, ¿Has comprobado que la medida de los márgenes y demás son correctos? Tiene toda la pinta de que hayas limitado el margen o el relleno ("padding") del menú y por eso en la zona final el comportamiento es nulo.

Por cierto, puesto que ya estamos hablando del menú que te propuse y no de la barra de pestañas que se explica en este post, mejor pasamos allí a seguir comentando.

Salu2

Publicar un comentario

Escribe aquí tus valoraciones, dudas, sugerencias,... Son sólo unos instantes y ayuda a mejorar el blog.