Crear una plantilla para Blogger (Parte 2) - Diseño CSS

Ya presentamos un primer artículo, de cómo crear una plantilla para blogger, en el cual, hablamos sobre la estructura básica con maquetación en imagen, explicamos las etiquetas XHTML que utilizamos, explicamos como añadir el contenido/cuerpo del blog y por ultimo explicamos los IDs y las Class.

En esta 2da parte vamos a tener claro otros puntos y vamos a añadir la hoja de estilos mediante CSS.

1. La Hoja de estilos CSS

Vamos a crear y explicar la hoja de estilos CSS que vamos a añadir entre las etiquetas <b:skin> y </b:skin> de nuestra plantilla.

El body
Vamos a comenzar con elaborar el body que contendrá el color de fondo, el tipo de fuente, el color y tamaño: body { background:#ffffff; font-family: "Trebuchet MS", Tahoma, Verdana; font-size: 12px; color: #666666; margin:0; padding:0; height:100%; } La Cabecera
La cabecera contendrá el titulo y la descripción del blog, el margen determinado y los bordes redondeados: #header-wrapper { overflow:hidden; width:940px; color:#fff; margin:auto; margin-top:-10px; margin-bottom:10px; height:100px; background:#47b013; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; transition:all .5s; padding:2px; }

Nota: Vamos a recordar que para reducir el código del contenido/cuerpo del blog, tuvimos que añadir el header sin section, sinó que lo añadimos de esta forma:

<h1><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1> Entonces, para añadir estilo al titulo del blog, debemos utilizar un código como el siguiente: #header h1 a { margin-left:50px; color:#fff; font-size:50px; text-decoration:none; } Y si queremos añadir el header tipo section/widget reemplazamos el código anterior y agregamos este: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Nombre (cabecera)' type='Header'> <b:includable id='main'> <div class='titlewrapper'> <h1 class='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'/> </b:if> </h1> </div> <div class='descriptionwrapper'> <p class='description'> <data:description/> </p> </div> </b:includable> </b:widget> </b:section>

El contenedor exterior
Lleva como nombre outer-wrapper, se encargará de centralizar, estructurar y contener los demás elementos: /*El contenedor exterior*/ #outer-wrapper { width:940px; margin:0 auto; min-height:100%; height:100%; } El sidebar
Contendrá los Widgets o gadgets que se añadan, entre otras cosas: /*Sidebar, derecha*/ #sidebar-wrapper { width:35%; padding:10px; background:#47b013; color:#fff; float:right; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; transition:all .5s; padding:2px; } El main
Contendrá las entradas del blog: /*Main - principal*/ #main-wrapper { color:#fff; width:63%; padding:15px; margin:auto; margin-right:10px; background:#390; float:left; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; transition:all .5s; padding:2px; } El footer
Contendrá los créditos entre otras cosas: /*Footer*/ #footer-wrapper { position: relative; margin:0px auto; width:940px; background:#390; height:60px; color:#fff; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; transition:all .5s; padding:2px; } #footer { margin:0px auto; width:800px; text-align:center; } Ocultar la barra de blogger
Para ocultar la molesta barra de blogger, este código te servirá: #navbar-iframe { height:0px; visibility:hidden; display:none; } El clearfooter
Esto se encargará de separar el footer y centralizarlo: .clearfooter { height: 50px; clear: both; } Juntando todos esos elementos, obtendríamos el código completo: body { background:#ffffff; font-family: "Trebuchet MS", Tahoma, Verdana; font-size: 12px; color: #666666; margin:0; padding:0; height:100%; } /*Cabecera del blog*/ #header-wrapper { overflow:hidden; width:940px; color:#fff; margin:auto; margin-top:-10px; margin-bottom:10px; height:100px; background:#47b013; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; transition:all .5s; padding:2px; } #header h1 a { margin-left:50px; color:#fff; font-size:50px; text-decoration:none; } /*El contenedor exterior*/ #outer-wrapper { width:940px; margin:0 auto; min-height:100%; height:100%; } /*Sidebar, derecha*/ #sidebar-wrapper { width:35%; padding:10px; background:#47b013; color:#fff; float:right; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; transition:all .5s; padding:2px; } /*Principal, izquierda*/ #main-wrapper { color:#fff; width:63%; padding:15px; margin:auto; margin-right:10px; background:#390; float:left; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; transition:all .5s; padding:2px; } /*Footer*/ #footer-wrapper { position: relative; margin:0px auto; width:940px; background:#390; height:60px; color:#fff; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; transition:all .5s; padding:2px; } #footer { margin:0px auto; width:800px; text-align:center; } #navbar-iframe { height:0px; visibility:hidden; display:none; } .clearfooter { height: 50px; clear: both; } Con eso bastaría para obtener un diseño simple de demostración, Solo faltaría implementarlo en la plantilla como ya mencionamos anteriormente, añadiendo todo el código CSS mostrado entre las etiquetas <b:skin> y </b:skin>.

Cuando lo hayamos añadido nos quedaría algo como lo siguiente:

Con eso ya tendríamos una plantilla simple para blogger, pueden modificar desde su estructura hasta su diseño como ustedes gusten, también pueden agregar modificaciones como el multiple sidebar, para eso preparamos un tercer artículo.