Para iniciar nuestro tutorial sobre plantillas para Blogger, empezaremos por realizar algunos cambios básicos en la estructura principal de la plantilla. Estos cambios consisten en añadir a la estructura de nuestra plantilla una serie de módulos en la parte superior de la estructura, de tal forma que el resultado sería este:
Vamos a utilizar para este ejercicio la plantilla Mínima que viene por defecto cuando creamos un nuevo blog en blogger. Si vamos a la pestaña de Diseño y despues a Elementos de la Página, tendremos algo muy similar a esto:
1.- Para comenzar, vamos a la edición de HTML de nuestra plantilla en blogger (Diseño>Edición de HTML). Una vez allí marcamos la pestaña de Expandir Plantillas de Artilugios. Y buscamos 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 partir de la línea marcada en rojo añadimos el siguiente código marcado en verde;
<div id='main-wrapper'>
<div id='main-top-contenedor'>
<div id='main-top1-1' style='width: 100%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top1-1' 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>
3.- El resultado sería el siguiente;
4.- Si lo que queremos es añadir dos columnas en lugar de una al módulo, entonces el código que deberíamos de introducir es el siguiente (buscar la línea en rojo y a continuación pegar el código en verde):
<div id='main-wrapper'>
<div id='main-top-contenedor'>
<div id='main-top2-1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top2-1' preferred='yes' style='float:left;'/>
</div>
<div id='main-top2-2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top2-2' 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>
El resultado para el código de dos columnas sería el siguiente:
5.- Para introducir tres columnas el código sería este:
<div id='main-wrapper'>
<div id='main-top-contenedor'>
<div id='main-top3-1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top3-1' preferred='yes' style='float:left;'/>
</div>
<div id='main-top3-2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top3-2' preferred='yes' style='float:left;'/>
</div>
<div id='main-top3-3' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top3-3' 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>
6.- Y por último para introducir cuatro columnas el código que debemos de insertar es el siguiente:
<div id='main-wrapper'>
<div id='main-top-contenedor'>
<div id='main-top4-1' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top4-1' preferred='yes' style='float:left;'/>
</div>
<div id='main-top4-2' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top4-2' preferred='yes' style='float:left;'/>
</div>
<div id='main-top4-3' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top4-3' preferred='yes' style='float:left;'/>
</div>
<div id='main-top4-4' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top4-4' 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.- Si lo que prefieres es añadir de una sola vez todos los códigos para optimizar al máximo el diseño de tu blog, entonces hazlo añadiendo el siguiente código en verde a continuación de la linea roja;
<div id='main-wrapper'>
<!-- CODIGO MODULO MENU SUPERIOR :: 1 Columna -->
<div id='main-top-contenedor'>
<div id='main-top1-1' style='width: 99%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top1-1' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
<!-- CODIGO MODULO MENU SUPERIOR :: 1 Columna -->
<!-- CODIGO MODULO MENU SUPERIOR :: 2 Columnas -->
<div id='main-top-contenedor'>
<div id='main-top2-1' style='width: 49%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top2-1' preferred='yes' style='float:left;'/>
</div>
<div id='main-top2-2' style='width: 49%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top2-2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
<!-- CODIGO MODULO MENU SUPERIOR :: 2 Columnas -->
<!-- CODIGO MODULO MENU SUPERIOR :: 3 Columnas -->
<div id='main-top-contenedor'>
<div id='main-top3-1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top3-1' preferred='yes' style='float:left;'/>
</div>
<div id='main-top3-2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top3-2' preferred='yes' style='float:left;'/>
</div>
<div id='main-top3-3' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top3-3' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
<!-- CODIGO MODULO MENU SUPERIOR :: 3 Columnas -->
<!-- CODIGO MODULO MENU SUPERIOR :: 4 Columnas -->
<div id='main-top-contenedor'>
<div id='main-top4-1' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top4-1' preferred='yes' style='float:left;'/>
</div>
<div id='main-top4-2' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top4-2' preferred='yes' style='float:left;'/>
</div>
<div id='main-top4-3' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top4-3' preferred='yes' style='float:left;'/>
</div>
<div id='main-top4-4' style='width: 24%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top4-4' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
<!-- CODIGO MODULO MENU SUPERIOR :: 4 Columnas -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
Puedes descargar la plantilla de ejemplo utilizada para este tutorial con todos los códigos insertados. Haz una copia de la plantilla actual y preferiblemente utiliza tu blog de pruebas.
Ahora solo depende de ti escoger cual es el diseño que más se adapta a tus necesidades para poder mejorar el diseño de tu blog.
Si quieres aprender más visita el Índice de nuestro
Te esperamos en la siguiente entrega del Tutorial de Plantillas para Blogger
No hay comentarios:
Publicar un comentario
Normas de publicación:
- El comentario debe de tener relación con la entrada
- Los comentarios anónimos están permitidos, pero serán moderados
- Argumenta tus comentarios de forma clara. Aporta información Relevante.
- No utilices unicamente Mayúsculas ni ortografías abreviadas del tipo texto SMS. Escribe correctamente.
- El Spam será borrado automaticamente.
- No hagas comentarios irrelevantes; serán considerados Spam.
- Evita las ideas generales y el lenguaje vulgar.
- Para dejar tu URL comenta con OpenID.
- Backlinks son automaticos.
- Los comentarios pueden tardar un tiempo mínimo en ser publicados.
NOTA: Los comentarios de los usuarios no reflejan las opiniones del editor. No se aceptarán bajo ningún concepto comentarios difamatorios, o faltas de respeto hacia los usuarios de este blog. Libertad de expresión Si, pero con educación.