relojes blogs

28.3.12

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


Comparte esta historia en:
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 :-)

7 Comentarios :

Rodrigo Acuña Bravo dijo...

Hola, estoy probando este recurso pero me gustaría que la pestaña que está activa quede con un color distinto...se puede

Saludos y felicitaciones por el sitio

Rodrigo

Antonio (duque71) dijo...

Hola Rodrigo le echo un vistazo al código, y si consigo modificarlo lo hago saber.

un saludo

Antonio (duque71) dijo...

También hay por aquí esta caja con pestañas en rojo, esta si marca la pestaña activa de otro color.
http://zarabarandula.blogspot.com.es/2012/03/agrupar-gadgets-de-la-sidebar-en.html

Rodrigo Acuña Bravo dijo...

Revise el link pero me siogue gustando mas la primera caja. Alguna novedad con el código ?

Gracias

Saludos
Rodrigo

Antonio dijo...

Hola Rodrigo Acuña

Me temo que los cambios que queremos hacer se encuentran en el script y no tenemos acceso para manipularlos, pero seguiré probando con el css a ver si suena la flauta.

Un saludo :-)

María dijo...

¡Hola! Si quiero poner un gadget en el contenido, ¿cómo debería hacerlo? Querría poner en concreto el de archivos y entradas populares. ¡Gracias!

Antonio Duque dijo...

@María
hola María, este tab sirve para poner los códigos de los gadgets pero no vale para los que trae blogger por defecto, lo siento.

gracias por tu comentario, salu2..

¿Quieres comentar algo?




Estado del blog

entradas
comentarios
1.467 followers
168 seguidores
 días online



Comentarios recientes

 
© Copyright 2009 - 2015 | Contacto | Seguir este blog | Sobre mi | Facebook | Twitter | LinkedIn | Mapa del sitio | Tienda | Conversor | RSS |

@duque71 2015