viernes, 16 de mayo de 2008

Añade una barra lateral (Side-bar) a tu blog

Como veréis hemos hecho algunos cambios en el blog como añadir una segunda barra lateral y una sección de Archivos recientes y Últimos comentarios ordenados por pestañas. Sinceramente os digo que no ha sido nada fácil y me ha llevado su tiempo llegar a comprender cada trocito de código ya que cada vez que cambiaba un valor todo se iba al carajo. Pero después de un arduo trabajo logre conseguir lo que esperaba. Para aquellas personas que tengan las mismas ambiciones que yo y que al igual que yo se han encontrado con algunas dificultades, voy a dedicar este y el siguiente post a explicar como he llevado a cabo el proceso.

En primer lugar aprenderemos a añadir una segunda “sidebar” a nuestra plantilla. Para ello nos dirigimos a la sección diseño/edición HTML sin necesidad de expandir los artilugios, no dirigimos a la parte del código donde encontremos estas líneas:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

(Elementos añadidos en la sidebar correspondiente)

</b:section>
</div>
Justo después de estas simplemente lo que hay que hacer es añadir otro DIV donde albergara nuestra segunda barra lateral.
<div id='sidebar-wrapper2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes' showaddelement='yes'>
</b:section>
</div>
Posterior a esto lo último que nos falta es crear el estilo para nuestra nueva barra lateral. Para ello nos dirigimos a la zona donde tengamos el estilo de nuestra primera barra lateral para que nos sea más fácil ubicarlas para a continuación modificarlas. Deberíais ver algo así:
#sidebar-wrapper {
margin:0px 0px 0px 40px; /*(margen superior, izquierdo, inferior, derecho)*/
float: left;
padding: 0px 0px 20px 0px; /*(relleno...)*/
width:220px; /*(anchura)*/
color: $colortextolateral;
overflow: hidden;
}

Pues debajo añadiremos este trozo duplicado pero cambiado de nombre.
#sidebar-wrapper2{
margin:0px 0px 0px 0px;
float: right;
padding: 0px 10px 20px 0px;
width: 140px;
color: $colortextolateral;
overflow: hidden;
}

Como os habréis fijado aparte del nombre hemos retocado algunos valores para que quedaran bien alineados en el blog, pero recordad que cada blog es un mundo por lo que deberéis ir probando las distintas dimensiones para acomodarlos a vuestro gusto.

Si tenéis problemas para conseguir el resultado que esperabais comentadlo que os ayudaremos en todo lo posible. Espero que les sea de utilidad. En el próximo post aprenderemos a agregar una script que nos permitirá poner distintas secciones ordenadas por pestañas.

3 Comentarios:

PAblo dijo...

disculpa, yo estoy buscando poner una segunda barra, pero no junto a la existente, sino en el otro margen, yo tengo una sidebar a la izquierda y quiero poner una tira de imagenes verticales a la derecha, sabes como es?
gracias.

Mario dijo...

Hola Pablo¡¡

Pues normalmente suele ser muy sencillo, pero date cuenta que cada plantilla es un mundo así que no te ofrezco resultados a la primera.

De modo que, para añadir una sidebar en el otro lado opuesto a donde ya tienes uno, que en tu caso dices que es el izquierdo, lo unico que tienes que hacer es buscar el estilo en CSS de la sidebar que ya tienes que debería llamarse asi: #sidebar-wrapper.

Duplicalo enteramente, y le cambias el nombre a por ejemplo #nuevasidebar-wrapper. A esta sloamente le cambias el parametro float si lo tienes y si no se lo añades quedando: float:right;

Esto debería ser suficiente, de todos modos si no consigues resolverlo podrías dejarme la dirección del blog para echarle un vistazo al código fuente.

Saludos y suerte¡¡

Unknown dijo...

ola como ago para que los 2 sidebar esten uno del lado derecho y el otro del lado isquierdo que no piedo

Publicar un comentario