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