Widebar Con Pestañas para Cualquier Plantilla de Blogger

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;}
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>
</div>
</div></div>
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------------------*/
solid #CCC;border-bottom: none;background: #EEE;text-decoration:
none;}
#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:
#CCC;border-top:0;}
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:
#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');
#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.tabberactive a{background-color: #FFF;color: #369;border-
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:
#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-
Efecto hover de las pestañas 2 y 3
#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------------------*/

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:
.tabberlive .tabbertab {background: d2b48c;padding:5px;border:1px
solid #CCC;border-top:0;}
<script src='http://paqui64.googlepages.com/tabber.js' type='text/javascript'/>

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
</div>
</div>
</div>
</div></div>

Widebar Con Pestañas para Cualquier Plantilla de Blogger

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Widebar Con Pestañas para Cualquier Plantilla de Blogger

Uploaded by

Copyright:

Available Formats

Widebar con pestañas para cualquier plantilla de Blogger

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

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

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

Y justo antes añadimos:

Lo que haremos ahora será incorporar los elementos

Cuando terminamos vemos que los elementos quedan

(Me olvidaba poner el ejemplo)

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

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

Color de fondo en contenido

Añadir imagen de fondo a contenido

Color del texto.

.tabberlive .tabbertabhide {display:none;}

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

You might also like