Diego Cabai | Blog

Cómo Agregar Tabs o Pestañas en Blogger

Todo comenzó con la pregunta de sancocho en un comentario dentro del Blog. El mismo me consulta sobre cómo agregar las solapas que tengo en este blog a la derecha donde tengo los "Destacados", "Archivo", "Categorías", etc.
Bueno, la respuesta comienza en haber agregado tabs o pestañas dentro del diseño que no las traía. Hay varias formas de agregar pestañas, yo voy a comentar el que utilicé que es totalmente adaptable a Blogger/Blogspot, es mas, hice un Blog temporal de Demo con las pestañas agregadas para que vean que funciona.

Dentro de estas pestañas podrán poner todo tipo de contenido ya que es parte de código HTML, así que lo que pongan dentro de cada una es como si lo pusieran independientemente. El ejemplo es solo con links pero es totalmente adaptable a imágenes como tengo en la pestaña "Directorios".

El procedimiento que utilizo es gracias al increíble JavaScript creado por BarelyFitz Designs. Para acceder al JavaScript tabifier podes hacer click aquí ».
A continuación comento los pasos, podés ver que las Tabs funcionan en Blogger en este link:  Tabbed Blogger
Hay algunos templates de Blogger que ya incluyen los Tabs o Pestañas. Podés encontrar varios templates de este tipo en BTemplates como: Forte y Visionary

Pasos:
1. Bueno, en principio vamos a necesitar subir un archivo de JavaScript a algún hosting que podamos utilizar para luego linkearlo. Un ejemplo es Google Pages. Ahí podés crear un sitio html o bien subir archivo para luego utilizarlos como en nuestro caso el JavaScript que necesitamos. Una vez creado el sitio de Google Pages, que es un click "Crear" jaja vamos al botón "Upload" y subimos el archivo JavaScript siguiente que previo lo hemos bajado a nuestro disco.

Bajar el Archivo JavaScript (Es un zip y dentro del zip está el tabber.js que es el que debemos utilizar)

2. Ahora volvemos a Blogger y vamos a Diseño -> Edición de HTML. En esta sección vamos a agregar el código necesario para llamar al JavaScript y la primera parte del diseño de las pestañas.

Debemos agregar la primera línea de código debajo de ]]></b:skin> pero antes de </head>.

<script type="text/javascript" src="http://www.tusitio.com/tabber.js"> </script>

Obviamente el www.tusitio.com se debe modificar por la URL de donde subiste el Java Script, por ejemplo, tusitio.googlepages.com, etc.

3. Seguimos en la misma sección pero ahora vamos a agregar parte el código de diseño, que en el ejemplo es muy pobre jaja pero era a modo de ejemplo. Es mas, es parte del ejemplo que viene en el archivo .zip que bajamos antes.

Este código debe ser insertado justo antes de ]]></b:skin>.

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide { display:none;}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {}
.tabberlive { margin-top:1em;}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif;}
ul.tabbernav li { list-style: none; margin: 0; display: inline;}
ul.tabbernav li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none;}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover { color: #000; background: #AAE; border-color: #227;}
ul.tabbernav li.tabberactive a { background-color: #fff; border-bottom: 1px solid #fff;}
ul.tabbernav li.tabberactive a:hover { color: #000; background: white; border-bottom: 1px solid white;}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {  padding:5px; border:1px solid #aaa; border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 { display:none;}
.tabberlive .tabbertab h3 { display:none;}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {}
.tabberlive#tab2 {}
.tabberlive#tab2 .tabbertab { height:200px; overflow:auto;}
.tabberlive .tabbertab li{list-style-type:none;background:transparent url(i/b.gif) no-repeat 0 2px;border:0;margin:0 0 1px;padding:0 0 0 15px;}

Guardamos los cambios que hicimos y vamos a agregar el contenido de las pestañas o tabs en nuestro sitio.

4. Vamos a "Elementos de la página" y agregamos un nuevo elemento HTML. Lo ponemos donde querramos que aparezcan las pestañas y dentro de éste ponemos el siguiente código:

<div class="tabber">

  <div class="tabbertab">
    <h3>Sección 1</h3>
    Contenido de la sección 1.
  </div>

  <div class="tabbertab" title="Título">
    Contenido de la sección 2.
  </div>

</div>

Si guardamos lo que hicimos y vemos nuestro sitio deberíamos ver 2 pestañas, una llamada Sección 1 y la otra Sección 2. Hasta ahora ambas tienen sólo texto pero ese contenido de la sección se puede cambiar por cualquier código que nosotros querramos agregar.

En el caso de la sección 1, el título de dicha pestaña está definido por <h3>, ahora en el segundo caso se utilizó un title dentro del <div>. Por ejemplo, podríamos agregar una lista de enlaces o cualquier otro trozo de código HTML que nosotros querramos. No tengo a mano una forma de agregar los links destacados pero podemos hacer una lista a mano con los 5 enlaces que mas queremos que la gente visite.

El diseño se puede modificar a través del código CSS que se agregó mas arriba. Dejo a la imaginación de cada uno para realizar dichas modificaciones y lograr el mejor diseño para Blogger.

Por otro lado, podemos agregar tantas pestañas como querramos o nos entren en nuestro diseño, para cada pestaña que querramos agregar debemos utilizar el siguiente código justo antes del último </div> que se ve mas arriba.

<div class="tabbertab">
    <h3>Título de la Pestaña</h3>
   Contenido HTML de la sección
</div>

Con este artículo vas a poder agregar las pestañas o tabs en Blogger. El código que introduzcas en dichas pestañas será el poder que le des a este sistema muy utilizado últimamente en los sitios ya que permite ordenar parte de la navegación para el usuario utilizando menos espacio.

Si no te funciona, cualquier duda o consulta por favor dejame un comentario e intentaré responder a la brevedad.