Agrupar gadgets de la sidebar en pestañas (2)

En mi búsqueda de un Tab para este blog que me reagrupase varios gadgets en pestañas, encontré este en EL Balcón de Jaime y me pareció muy bueno.
Ya tropecé con otro que expliqué en este post y que no al final no lo coloqué porque no podía personalizar los colores, pero el Tab que hoy os traigo es total mente personalizable en cuanto a colores de fondo, borde, color de las pestañas, hover, etc...

El ejemplo lo podéis apreciar en la sidebar de este mismo blog, mas, si queréis ponerlo en vuestro sitio, estos son los pasos a seguir:

Entramos en Diseño > Edición de HTML > Expandimos artilugios

Busca la etiqueta ]]></b:skin> y añade estos bloques de CSS encima

ul.bltabcaja {height:24px;
margin: 0 auto;
width: 100%;
padding: 0;
float: left;
list-style: none;
list-style-type: none;
}
ul.bltabcaja li {
height:23px;
line-height:23px;
overflow: hidden;
background: #b3e0b5;
float: left;
position: relative;
margin: 0 auto;
padding: 0;
border-left: none;
margin-bottom: -1px;
border: 1px solid #999999;
}
ul.bltabcaja li a {
padding: 0 18px;
font-size: 14px;
text-decoration: none;
color: #000000;
display: block;
outline: none;
}
ul.bltabcaja li a:hover {
text-decoration: none;
background:#81D585;
}
ul.bltabcaja li a:active {
background: #6db671;
}
#bltabcaja2 {
width: 218px;
clear: both;
border-top: none;
border: 1px solid #999999;
overflow: hidden;
float: left;
background: #ffffff;
}
.bltabcaja_contenido {
font-size: 14px;
padding: 20px;
}
html ul.bltabcaja li.actual a:hover {
background: #ffffff;
border-bottom: none;
}

Ahora busca la etiqueta </head> y encima inserta este script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function()
{
$(".bltabcaja_contenido").hide();
$("ul.bltabcaja li:first").addClass("active").show();
$(".bltabcaja_contenido:first").show();


$("ul.bltabcaja li").click(function()
{
$("ul.bltabcaja li").removeClass("active");
$(this).addClass("active");
$(".bltabcaja_contenido").hide();
var bltababierta = $(this).find("a").attr("href");
$(bltababierta).fadeIn();
return false;
});
});
</script>

La primera línea (marcada en grisáceo) es el script JQuery.min.js, por lo que si ya lo tienes en la plantilla no necesitas volver a ponerlo.

Guarda la plantilla.

Ahora procederemos a introducir el contenido de cada Tab o pestaña en un gadget HTML-javascript, para ello nos dirigimos a Diseño > Añadir gadget (elemento de página) > html-javascript 

Y pegamos lo siguiente:

<ul class="bltabcaja">
<li><a href="#bl1">TITULO TAB 1</a></li>
<li><a href="#bl2">TITULO TAB 2</a></li>
</ul>


<div id="bltabcaja2">
<div id="bl1" class="bltabcaja_contenido">
CONTENIDO TAB 1
</div>
<div id="bl2" class="bltabcaja_contenido">
CONTENIDO TAB 2
</div>
</div>

Reemplaza TITULO TAB X por el título que llevará la pestaña y CONTENIDO TAB X por el contenido que mostrará.

Si te fijas, en el código hay cuatro elementos resaltados en naranja. Estos son los "nombres" de las pestañas y cada una debe tener uno distinto.

En caso de querer añadir más pestañas, copia la segunda línea y pégala antes de </ul> . ¡No olvides cambiarle el nombre!

Después, bastará con añadir antes del cierre </div> otro bloque como este (en el que debes cambiar otra vez el nombre):

<div id="bl1" class="bltabcaja_contenido">
CONTENIDO TAB 2
</div>

Es todo, pregunta si tienes alguna duda :-)