Gadget multipestañas en Blogger

Insertar un Gadget Multipestañas en tu Blog, es algo muy recomendado ya que en él puedes organizar tus gadgets de tal forma que ocupen menor espacio en la sidebar, además de ser algo bastante vistoso, es algo muy configurable, se puede insertar cualquier otro gadget sobre él, ya sea desde un simple texto, hasta un avanzado Gadget HTML, puedes ver este gadget en acción en la siguiente imágen:


1. Primero vamos a nuestro escritorio en Blogger, y nos vamos a Diseño, Edición de HTML.

2. Seleccionamos ‘’Expandir plantillas de artilugios’’.

3. Buscamos el siguiente código: ]]></b:skin> y sobre éste agregamos el siguiente código:

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;
}

4. Ahora buscamos </head> y sobre éste pegamos el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function()
{
$(&quot;.bltabcaja_contenido&quot;).hide();
$(&quot;ul.bltabcaja li:first&quot;).addClass(&quot;active&quot;).show();
$(&quot;.bltabcaja_contenido:first&quot;).show();
$(&quot;ul.bltabcaja li&quot;).click(function()
{
$(&quot;ul.bltabcaja li&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.bltabcaja_contenido&quot;).hide();
var bltababierta = $(this).find(&quot;a&quot;).attr(&quot;href&quot;);
$(bltababierta).fadeIn();
return false;
});
});
</script>

5. Guardamos la plantilla.
 
6. Ahora creamos un Gadget HTML y sobre él escribimos el siguiente código:

<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>

Donde dice TITULO TAB X, corresponde al título de cada pestaña, donde dice CONTENIDO TAB X corresponde al contenido del gadget.
Puedes agregar otra pestaña agregando antes del cierre (</div>) el siguiente código:

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

También antes de </ul> deberás pegar lo siguiente:

<li><a href="#bl3">TITULO TAB 3</a></li>

Si deseas agregar otras más deberás pegar el mismo código pero donde dice ‘’bl3’’ deberás reemplazar el número por bl4, bl5, así consecutivamente.


Eso es todo, y cualquier duda o problema, puedes comentar.

.