Pestañas para organizar el contenido de tu blog

Como bien dijimos en nuestro anterior post sobre como añadir una nueva barra laterala al blog, este en cuestión tratará sobre el segundo cambio sustancial de nuestro blog que fue la organización de distintas secciones mediante pestañas.

Esto lo hemos conseguido gracias a un script proporcionado por Barelyfitz el cual nos permite añadir diferentes contenidos sea cual sea y organizarlo por distintas categorías mediante pestañas. El archivo javascript correspondiente es este (tabber.js), el cual deberemos alojarlo en algún servidor para poder usarlo, Google Pages* es una buena alternativa gratuita y sencilla para este tipo de cuestiones.

Lo primero será añadir el “script” para que el blog lo cargue. Por lo que iremos a la sección de diseño de nuestro blog y en edición HTML situaremos el código entre ]]></b:skin> y </head>.

<script type="text/javascript" src="URL DONDE ESTARÁ ALOJADO EL ARCHIVO TABBER.JS"/>

Lo siguiente será agregar el estilo CSS de las pestañas que vamos a agregar. En la seccion de "Tab Interface" de la página de Barelyfitz nos muestran uno pero muy rudimentario por lo que os daremos algunas señas para modificarlo a vuestro gusto y darle algo más de colorido. Este a su ves debemos colocarlo entre las etiquetas <b:skin><![CDATA[ y ]]></b:skin> de vuestra plantilla.

.tabberlive .tabbertabhide {
display:none;
}
.tabber {
}
.tabberlive {
margin-top:1em;
}
ul.tabbernav /*(Aqui podemos configurar el relleno de las etiquetas o el borde)*/
{
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;
}
/*(Aquí podemos añadir el color del fondo del contenido entre otras cosas)*/
.tabberlive .tabbertab 
{
padding:5px;
border:1px solid #aaa;
border-top:0;
}

.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

Guardamos los cambios realizados y nos dirigimos a elementos de la página, añadimos uno del tipo HTML/Javascript donde queramos que aparezcan las pestañas y agregamos lo siguiente:

<div class="tabber">

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

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

</div>

Este código nos mostrara dos pestañas con su respectivo contenido para la adición de alguna pestaña mas solo tenéis que repetir el siguiente código antes del último <div>.

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

Y esto es todo, es sencillo pero tened cuidado que siempre puede ocurrir que algo nos salga mal. Para evitar males innecesarios haced una copia de seguridad de toda vuestra plantilla antes de hacer cualquier cambio en ella.

Si tenéis alguna duda podéis comentarla y os ayudaremos a resolverla. Espero que os sea de utilidad.

Fuente: Barelyfitz
Descarga directa: (Incluye tabber.js, hoja de estilos y ejemplos en html)

#Actualización: *Google Pages ahora mismo no es una de las mejores opciones dado que Google pondra fin a este servicio a finales del 2008, una alternativa factible puede ser Yahoo! Geocities.