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:
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 verde):
<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.
[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.
No hay comentarios:
Publicar un comentario