Widebar Con Pestañas Para Cualquier Plantilla De Blogger

Y justo antes añadimos:

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 #sidebarwrapper 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;borderbottom: 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;borderbottom: 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;borderbottom: 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-conpestaas.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; bordercolor: #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'/>