04 septiembre 2009

Adicionar espacios extra en la zona de entradas

 

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