Mostrar cualquier contenido en tabs o pestañas resulta de mucha utilidad, sobre todo si no tenemos espacio suficiente en la sidebar (barra lateral) o deseamos que el blog cargue a una velocidad mayor.
En esta entrada aprenderemos de forma sencilla un básico procedimiento por el cual instalaremos las tabs en el blog.
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:
Diseño>añadir gadget (elemento de página)>html-javascript
Pega esto:
<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>
Una vez tengas el contenido escrito, guarda el gadget y obtendrás algo como esto:
Puedes editar el estilo de la caja por completo, aplicando colores de fondo distintos, así como editando los valores del tamaño del texto, la anchura, altura...
Si no sabes como hacerlo deja un comentario y te ayudaré.
Si no sabes como hacerlo deja un comentario y te ayudaré.
Referencias: Soh Tanaka
¿Problemas al comentar? Utiliza 
Muchas gracias. No sé que sería de mi blog sin el Balcón.
Gracias por enseñar este truco, hace tiempo que lo buscaba.
Muy bueno Jaime, esto estaba buscando desde hace tiempo, ahora voy a probar si me va bien, saludos.
Gracias a ti, Calisto por dejar tu huella en la entrada ^^.
Me alegro pues de que hayas encontrado lo que buscabas, Anónimo. Suerte con la instalación ;).
Jaime, muy buena tu explicación! pero me surge una duda, como coloco es los tabs por ejemplo el contenido de mis etiquetas, archivos del blog, blog amigos.
De antemano muchas gracias.
http://maximatecnologia.blogspot.com/
Ŵebmaster™, al decir "tabs" ¿te refieres a las casillas de la barra lateral? o te refieres a colocar el gadget de archivos, etiquetas... dentro de los tabs :S.
Esto último tendré que explicarlo en una entrada (se usa otro tipo de tabs), por lo que empezaré a escribirla ^^.
¡Abrazos!
Jaime, gracias por tu atención! me has entendido perfectamente, me refiero a colocar gadget de archivos, etiquetas dentro de los tabs.
Nuevamente muchas gracias.
http://maximatecnologia.blogspot.com/
Ŵebmaster™, pronto podrás ver el truco en El Balcón.
¡Abrazos!
Jaime, nuevamente un saludo desde Venezuela, he probado muchos codigos para colocar los gadgets en pestañas y nada, si me das una ayuda te lo agradeceria!
¿Podrías indicarme mejor el problema, Ŵebmaster™? ¿Te aparece algún tipo de error?
Este truco debería funcionar correctamente :S.
Jaime, funciona perfectamente, pero agregar gadget a esas pestañas! es decir poner en pestañas las secciones: etiquetas, fans, ultimas entradas, etc...
Ŵebmaster™, me temo que con este truco no va a poderse hacer. Estas pestañas únicamente sirven para mostrar contenido, ya sea texto o imagen, pero no gadgets.
Aún así, puedo decirte que pronto traeré otro truco muy similar, en el que explicaré como dividir la sidebar (barra lateral) en tabs.
Yo he probado esto con gadgets html y si funciona, he probado con varias cosas,en el contenido de las tabs se agrega el código HTML y listo nada del otro mundo, funciona perfectamente.
Cloudx18, si incluimos este código en la plantilla y no en un elemento de página e insertamos en donde iría el contenido de cada tab, una sección (<b:section...) y su correspondiente atributo showaddelement='yes' estoy seguro de que funcionaría. El método que explicaré más adelante no requiere una edición tan amplia del código ya que tan solo hará falta arrastrar los gadgets hacia cada pestaña (desde el apartado de Diseño>Elementos de la página).
Muchas gracias. Muy útil y didactico :)