Está en la página 1de 7

Widebar con pestañas para cualquier plantilla de Blogger

Hace un par de semanas estuve solucionando un problema en una plantilla Forte de


BTemplates y me gustó la widebar, resulta útil cuando la sidebar se hace interminable.
Usuário Compulsivo a contribuido para que podamos añadirla explicando la forma de
hacerlo. Así que vamos a seguir sus indicaciones, pero antes de empezar les sugiero que
guarden copia de su plantilla.
Empezaremos descargando el archivo tabber.js y lo alojamos en nuestro servidor.
Cuando lo tenemos alojado lo añadimos justo antes de </head> de esta forma:

<script type="text/javascript" src="url-archivo-tabber.js"></script>


Sustituyendo donde url-archivo-tabber.js por la url que nos proporciona nuestro
servidor.

Guardamos los cambios y vamos a añadir los estilos de la widebar en la CSS. Justo
antes de ]]></b:skin> añadimos lo siguiente:

/*--------Widetabt------------------*/
#tabsidebar-wrapper{width: 400px;float: right;border: 1px none
#CCC;margin-bottom: 15px;}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding:
0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px
solid #CCC;border-bottom: none;background: #EEE;text-decoration:
none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color:
#CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color:
#369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background:
#FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid
#CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

En el anterior código debemos hacer una pequeña modificación, se trata de sustituir


400px; por la medida exacta de nuestras dos columnas, #sidebar-wrapper y #newsidebar-
wrapper lo podemos saber sumando los dos valores de width.
Por ejemplo:
#sidebar-wrapper {
width: 200px;

#newsidebar-wrapper {
width: 200px;
#tabsidebar-wrapper{
width: 400px;
Guardamos los cambios y marcamos para expandir la plantilla, ubicamos:
<div id='sidebar-wrapper'>

Y justo antes añadimos:


<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1'
showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1'
showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1'
showaddelement='yes'/>
</div>
</div></div><!-- Fim da tabsidebar-wrapper-->

Guardamos los cambios de nuevo y si todo ha salido bien veremos en plantilla de diseño
lo siguiente:

Si en la sidebar ya
tenemos elementos añadidos lo veremos de esta forma:

Lo que haremos ahora será incorporar los elementos


dentro de las pestañas de la widebar.
clicamos sobre el número y arrastramos el elemento al lugar que hay disponible para
ello.
Repetimos la operación de nuevo, esta vez clicamos sobre el número siguiente y
arrastramos otro elemento hasta completar.

Cuando terminamos vemos que los elementos quedan


ocultos, guardamos los cambios y es el momento de ver el resultado

(Me olvidaba poner el ejemplo)

En realidad es muy sencillo de aplicar, hay que prestar atención y modificar en el


código la medida de nuestro #tabsidebar-wrapper que tenga la suma de #sidebar-
wrapper y #newsidebar-wrapper a veces incluso mirando en vista previa tenemos que
ajustar la medida.
También es conveniente que los títulos de los elementos no sean demasiado largos de lo
contrario las pestañas se ocultarían por falta de espacio.
Y por último... probar antes en ese blog para experimentos que todos tenemos y hacer
copia de la plantilla.
La personalización es posible respecto a colores y fondo pero será otro día.
Personalizando la widebar con pestañas

Lo prometido es deuda y aquí algunas ideas para personalizar la widebar con


pestañas.
En realidad los cambios no son cosa del otro mundo pero es cierto que el
aspecto cambia considerablemente, para aligerar un poco el trabajo voy a
explicar donde podéis hacer las modificaciones.
Ubicamos en la plantilla el código correspondiente a los estilos que añadimos en
la CSS:

/*--------Widetabt------------------*/
#tabsidebar-wrapper{width: 400px;float: right;border: 1px none
#CCC;margin-bottom: 15px;}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding:
0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px
solid #CCC;border-bottom: none;background: #EEE;text-decoration:
none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color:
#CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color:
#369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background:
#FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid
#CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}
Añadir color de fondo a pestañas
Comenzaremos con el color de las solapas o pestañas, todos sabemos que para
modificar un fondo lo hacemos en background así que buscamos en nuestro
código:
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid
#CCC;border-bottom: none;background: #EEE;text-decoration: none;}
Modificando background: #EEE; por otro color estamos modificando el color
de las pestañas 2 y 3
Para cambiar el color de la pestaña 1 lo haremos en:
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-
bottom: 1px solid #FFF;}

Color de fondo en contenido


Vamos a darle color a ese fondo que es la continuación de las pestañas, donde
añadimos el contenido y para ello buscamos:
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid
#CCC;border-top:0;}
De esta forma cambiamos el color de fondo que precede a las pestañas 1, 2 y 3

Añadir imagen de fondo a contenido


Ahora vamos ir un poco más lejos y los atrevidos pueden añadir una "imagen de
fondo" en lugar de color.
Sustituimos background: #FFF; por background:url('aquí la url de tu
imagen de fondo');
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid
#CCC;border-top:0;}
Quedaría algo así:
.tabberlive .tabbertab {background:url('aquí la url de tu imagen de
fondo'); padding:5px;border:1px solid #CCC;border-top:0;}

Color del texto.


Si modificamos el color de las pestañas puede que el texto pase desapercibido o
no resalte lo suficiente para ser legible así que cambiamos el color del texto en:
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-
bottom: 1px solid #FFF;}
En esas tres líneas cambiaremos color:#369; por el color escogido.

Bordes.
Ahora vamos con los bordes, ya sabemos que en border podemos modificar el
borde.
Donde solid es el tipo de borde y con px (pixels) determina el grosor del borde.
Al mismo tiempo cambiaremos el color en #453135;
Borde superior de la caja:
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid
#453135;}
Borde que rodea las pestañas:
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid
#CCC;border-bottom: none;background: #EEE;text-decoration: none;}
Borde que rodea el contenido de las pestañas:
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid
#CCC;border-top:0;}

Efecto Hover.
Las pestañas viene con efecto hover, dicho efecto nos permite definir su aspecto,
nos daremos cuenta porque al pasar el puntero sobre las pestañas cambian de
color.
Efecto hover de la pestaña 1 modificamos el color en:
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-
bottom: 1px solid #FFF;}
Efecto hover de las pestañas 2 y 3
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color:
#CCC;}
http://gemablog-.blogspot.com/2008/09/personalizando-la-widebar-con-
pestaas.html

http://gemablog-.blogspot.com/2008/08/widebar-con-pestaas.html

d2b48c(transpatrente)

#5c7a32 verde

/*--------Widetabt de gema------------------*/
#tabsidebar-wrapper{width: 252px;float: right;border: 1px none
#CCC;margin-bottom: 15px;}

.tabberlive .tabbertabhide {display:none;}


.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding:
0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px
solid #CCC;border-bottom: none;background: d2b48c;text-decoration:
none;}
ul.tabbernav li a:link { color:#e1771e;}
ul.tabbernav li a:visited { color: #e1771e;}
ul.tabbernav li a:hover{color:#5c7a32; background:d2b48c; border-
color: #CCC;}
ul.tabbernav li.tabberactive a{background-color:d2b48c;color:
#e1771e;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #5c7a32;background:
#FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: d2b48c;padding:5px;border:1px
solid #CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

<script src='http://paqui64.googlepages.com/tabber.js' type='text/javascript'/>


<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1'
showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1'
showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1'
showaddelement='yes'/>
</div>
</div></div><!-- Fim da tabsidebar-wrapper-->