Adicionar espacios extra en la zona de entradas

04 septiembre 2009

Adicionar espacios extra en la zona de entradas

    2 comentarios

Vamos a ver paso a paso, como incluir una nueva sección sobre y debajo de las entradas dividida en dos columnas. El resultado será algo como esto:

Sección main

Como siempre habrá quien quiera añadir los nuevos espacios solo en la parte de arriba o solo en la de abajo, vamos a ver como hacerlo por separado:
[1] Una vez en nuestro panel de Blogger vamos a la pestaña de Diseño y si tenemos algún gadget añadido sobre o debajo de la zona de entradas, lo retiramos para evitar problemas a la hora de modificar el código, más tarde podemos volver a colocarlos en su sitio de nuevo.

[2] Guardamos cambios.

[3] Vamos a la pestaña de Edición HTML y localizamos el código que pertenece a la sección de las entradas:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>

[4] Colocamos el código necesario para la nueva sección de dos columnas en la parte de abajo de las entradas.
Lo haremos en el código anterior de esta manera (el código que hay que añadir está destacado en color azul):

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

<div id='main-footer-contenedor'>
<div id='main2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>
</div>
<div id='main3' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
</div>


[5] Guardamos los cambios y comprobamos el resultado en la parte de Diseño del panel.

Sección footer


[6] Si lo que queremos es una nueva sección de dos columnas en la parte superior de las entradas, volvemos a situarnos en el código de la plantilla que pertenece a las entradas ( paso [3] ) y añadimos el código necesario (destacado en colo rojo):

<div id='main-wrapper'>
<div id='main-top-contenedor'>

<div id='main-top1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top1' preferred='yes' style='float:left;'/>
</div>

<div id='main-top2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
 <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>

[7] Guardamos los cambios y comprobamos el resultado en la parte de Diseño del panel.

Sección top

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


2 comentarios :

  1. Anónimofebrero 24, 2010 2:04 p. m.

    Hola.que tal encantada soy paulette.
    Excelente este post, sos mas que claro, didàctico y saliò de primera intenciòn Gracias
    Me pregunto si tendràs algo emitido que explique como crear los bordes que deseamos en las sidebars o en el #main-wrapper {
    Por Ejemplo no he encontrado la forma de crear los bordes en EL TITULO ESPECIFICO DEL POST..sì en la fecha.Como asì tampoco crear dobles bordes si es posible si?
    Pero por lo que veo se maneja en POST y post h3 { para darte un ejemplo de uno solo de los bordes deseados)
    Sè que es cuestiòn de probar pero no doy en el punto vale?porque no se que parte de todos los sub rubros de Post maneja que?
    Espero haber sido clara!!!
    Gracias..me voy ahora a crear post en dos partes!!..encantada nuevamente ya me suscribo
    Adeu!!!!:)

    ResponderEliminar
  2. Unknownfebrero 24, 2010 6:51 p. m.

    buena paulette creo que entiendo un poco lo que dices... publicare un post sobre eso si logro hallar la forma de hacerlo y luego lo ves.. vale chau

    ResponderEliminar

Suscribirse a: Enviar comentarios ( Atom )