23 enero 2009

Colocando un Widebar en el blog

H

ace tiempo he estado probando el Widebar con pestañas, por lo general se utilizan para poner los últimos comentarios, post más comentados y las entradas más recientes. Pero puedes utilizarlo para lo que quieras, he visto muchas opciones para poner el widebar en el blog, pero esta me parece la más accesible.
¡Recuerda! "GUARDAR SIEMPRE UNA COPIA DE TU PLANTILLA EN TU PC


Para realizar este truco recuerda leer bien la entrada, si es posible probar en un blog de prueba, siempre guarda una copia de seguridad del blog.


Lo primero que todo nos descargaremos este archivo:



Una vez descargado lo subimos a nuestro propio alojador, luego nos vamos a la diseño - edición de HTML, y lo colocamos justo después del </head> y añadimos lo siguiente:

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

Recuerda que donde dice tabber.js, ahí colocaremos el URL que nos proporcione el alojador.

Se guardan los cambios y ahora agregaremos el estilo CSS al widebar, justo ante del ]]></b:skin> colocaremos lo siguientes:


/*--------Tabber ---------------------------------*/
#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;}

Ahora modificaremos en el estilo este valor 400px, este es donde se define el ancho del widebar, pero ojo tienes que poner el mismo tamaño que tiene en el #sidebar-wrapper de la plantilla. Los colores los puedes modificar a tu gusto.

Guardamos los cambios, expandimos la plantilla en artilugios y buscamos esto:

<div id='sidebar-wrapper'>

Luego justo ante de eso colocaremos lo siguiente:


<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--> 

Volvemos a guardar los cambios y nos vamos ahora a la plantilla de Diseño. Y veremos tal como aparece en esta imagen (Imagen tomada en el Gem@ Blog), lo que hacemos es hacer clic en un número y le damos añadir un gadget, repetimos la operación con los dos número restante.

Así lo podrás personalizar el estilo CSS: (Texto tomado de Gem@ Blog)
VER/OCULTAR

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;}

Fuentes:
Gem@ Blog 1 | 2
Usuário Compulsivo | Plantilla con el truco aquí
Diego Cabai

4 comentarios:

  1. Muchas gracias....me salvaste...de verdad te estoy agradecido porque no encontre esto en otro blog...Saludos.

    ResponderEliminar
  2. ¡Hola Angel! A tí por preferirnos. ¡Saludos!

    ResponderEliminar
  3. Hola, hay alguna forma de hacer lo que se muestra en este post o como se presentan los comentarios y demas entradas (Widebar) pero en Wordpress?

    Si conoces alguna forma me puedes mandar un email porfa a: santiago.mexicali@gmail.com

    Gracias

    ResponderEliminar

¡Gracias por comentarme! No modero los comentarios porque me parece tentar contra la libertad de expresión de cada individuo, por eso le pido que no hacer comentarios con palabras obscenas, si vas a comentar como Anónimo por favor coloca tu nombre o cualquier apodo. ¡Gracias!