Vamos a continuar con el Tutorial de Plantillas para Blogger, modificando el código para poder añadir más módulos a los que trae por defecto la plantilla. En este caso añadiremos hasta un máximo de cuatro módulos debajo del espacio de cada entrada del blog. Puedes ver el resultado al final del ejercicio.
Para empezar, y como ya hemos hecho en otras ocasiones, utilizaremos la plantilla por defecto que se instala con Blogger, la denominada Mínima. Antes de nada haz copia de tu plantilla actual y utiliza un blog de pruebas preferentemente.
1.- Para insertar los módulos inferiores debajo de cada entrada, buscaremos el siguiente código:
<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>
2.- A continuación debemos de añadir el siguiente código marcado en verde para añadir una única columna en el espacio inferior de la entrada:
<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='main1-1' style='width: 99%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1-1' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
</div>
3.- Para añadir dos columnas utilizaremos el siguiente código 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>
4.- Si lo que queremos es añadir tres columnas lo haremos añadiendo el siguiente código;
<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='main3-1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3-1' preferred='yes' style='float:left;'/>
</div>
<div id='main3-2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3-2' preferred='yes' style='float:left;'/>
</div>
<div id='main3-3' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3-3' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
</div>
5.- Y si preferimos cuatro columnas en la parte inferior de cada entrada, entonces añadimos el siguiente código marcado 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='main4-1' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col4-1' preferred='yes' style='float:left;'/>
</div>
<div id='main4-2' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col4-2' preferred='yes' style='float:left;'/>
</div>
<div id='main4-3' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col4-3' preferred='yes' style='float:left;'/>
</div>
<div id='main4-4' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col4-4' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
</div>
6.- Tambien puedes añadir todas las columnas como en el siguiente ejemplo:
<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>
<!-- CODIGO MODULO INFERIOR :: 1 COLUMNA -->
<div id='main-footer-contenedor'>
<div id='main1-1' style='width: 99%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1-1' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
<!-- CODIGO MODULO INFERIOR :: 1 COLUMNA -->
<!-- CODIGO MODULO INFERIOR :: 2 COLUMNAS -->
<div id='main-footer-contenedor'>
<div id='main2-1' style='width: 49%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2-1' preferred='yes' style='float:left;'/>
</div>
<div id='main2-2' style='width: 49%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2-2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
<!-- CODIGO MODULO INFERIOR :: 2 COLUMNAS -->
<!-- CODIGO MODULO INFERIOR :: 3 COLUMNAS -->
<div id='main-footer-contenedor'>
<div id='main3-1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3-1' preferred='yes' style='float:left;'/>
</div>
<div id='main3-2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3-2' preferred='yes' style='float:left;'/>
</div>
<div id='main3-3' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3-3' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
<!-- CODIGO MODULO INFERIOR :: 3 COLUMNAS -->
<!-- CODIGO MODULO INFERIOR :: 4 COLUMNAS -->
<div id='main-footer-contenedor'>
<div id='main4-1' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col4-1' preferred='yes' style='float:left;'/>
</div>
<div id='main4-2' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col4-2' preferred='yes' style='float:left;'/>
</div>
<div id='main4-3' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col4-3' preferred='yes' style='float:left;'/>
</div>
<div id='main4-4' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col4-4' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
<!-- CODIGO MODULO INFERIOR :: 4 COLUMNAS -->
</div>
Puedes modificar varios parámetros de configuración de las columnas, como son el ancho de las mismas (modificando el valor de width:) y la alineación (modificando el valor de float y text-aling).
El resultado de añadir todos los códigos sería algo similar a esto:
Esperamos que con estos ejercicios entiendas mejor el funcionamiento de los módulos superiores e inferiores de las plantillas de blogger. Si tienes alguna duda déjanos un comentario.
Tambien puedes descargar la Plantilla utilizada para este ejemplo con todas las modificaciones realizadas. Recuerda hacer una copia de tu plantilla original y utilizar tu blog de pruebas.
Tambien te puede interesar:
Te esperamos en la próxima entrega del Tutorial de Plantillas para Blogger.
Exelnte ayuda la tuya.Estoy tratando de empezar a editar muy themes y esto es de gran ayuda.Espero puedas continuar con el tutorial.
ResponderEliminarGracias
Hola.
ResponderEliminarAcabo de encontrar este tutorial a través de Google y tengo que decir que es fantástico. Me ha ayudado una barbaridad, y me gustaría saber si se va a continuar con el resto de temas del tutorial.
Saludos.