Una 'Widebar' es otra sidebar que ocupa el espacio de dos sidebars, encima o debajo de ellas. Naturalmente, esto sólo funciona si tu blog tiene dos sidebars.
Para usar el código, primero lee este post de Vivak para tener una idea general del hack. Tiene buenos gráficos para verlo facilmente.
Primero hay que cambiar la anchura en px a porcentaje. La suma total debe ser del 100%, por ejemplo:
* margen izquierdo 5%
* margen derecho 2%
* width 93% (este 93% contiene el main y las dos sidebars)
El desglose podría ser:
* main 50%
* sidebar izquierda 22%
* sidebar derecha 22%
* 6% para el espacio entre las columnas
Después asignamos este valor a la widebar (que es el 100% de la barra lateral izquierda y derecha)
* widebar 44%
Antes de empezar, haz una copia de seguridad de tu plantilla o práctica en un blog de pruebas. Para aplicar este hack en tu blog, este es el código que hay que añadir a tu hoja de estilo CSS (entre <head> y </ head>):
#widebar-wrapper {
width: 44%;
float:right;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#widebar {
width: 100%;
padding:10px 0 5px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */
}
Ahora, sin expandir se busca <div id='main-wrapper'>. En otras plantillas será content-wrapper, y añadimos este código:
<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>
Guardamos la plantilla. Vamos a 'Elementos de página' y vemos un nuevo 'Agregar elemento de página' en los widgets. Podemos crear un nuevo widget para la Widebar, o arrastrar un widget de una de sus barras laterales a la misma.
Con unos pocos ajustes aquí y allá, debería funcionar en cualquier plantilla.
Visitas
1 comentario:
Saludos, intente, me sale el widebar pero no encima de los dos sidebar, solo encima de una y me desconfigura el main, chequea por mi pagina