Poner pestañas/tabs en Blogger

Las pestañas o Tabs son elementos muy útiles en nuestro blog.

Demo.

Las pestañas nos pueden ayudar a mostrar mucha información en poco espacio, por ejemplo en la sidebar, mostrando y ocultando los datos sólo pulsando en ellas. La instalación en Blogger no es díficil.

Estos son los pasos a seguir:

1. Bajamos el fichero zip. En él se encuentran varios ficheros de ejemplos y el javascript (tabber.js) que deberemos alojar en nuestro sitio de alojamiento de ficheros habitual.

2. Antes de </head> añadimos el código del script.

<script type="text/javascript" src="tu_url/tabber.js">
</script>

tu_url es la dirección de tu alojamiento de ficheros.

3. Justo antes de ]]></b:skin> añadimos el css.

/*--------------------------------------------------
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.

4. En "Elementos de la página" agregamos un nuevo elemento HTML. En él añadimos el siguiente código:

<div class="tabber">

<div class="tabbertab" title="Pestaña1">
Contenido de la pestaña 1.
</div>

<div class="tabbertab" title="Pestaña2">
Contenido de la pestaña 2.
</div>

</div>

Guardamos.

El resultado será una primera pestaña con el texto "Contenido de la pestaña 1" y otra segunda con el texto "Contenido de la pestaña 2". En lugar de texto podemos incluir cualquier elemento (Perfil, últimos comentarios, últimas entradas, etc)

Podemos agregar tantas pestañas como necesitemos siempre que nos entren en el espacio que tengamos disponible, añadiendo este bloque las veces que sean necesarias:

<div class="tabbertab" title="PestañaX">
Contenido de la pestaña X.
</div>

Para adaptarlo al estilo de nuestro blog modificaremos la parte del css.

Visto en BarelyFitz Designs