Crea tu propia plantilla para Blogger – Tercera parte: Codificación.

Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!

Una vez que te has familiarizado con la estructura que suelen tener las plantillas de blogger y has definido la temática y el estilo de tu futuro diseño, es el momento de comenzar a darle forma a través del código CSS. Sería una locura comenzar desde cero a escribir el código de todas y cada una de las partes de la plantilla, por ello te recomiendo que selecciones la plantilla “Mínima” de Douglas Bowman en el panel de control de Blogger y realices las modificaciones necesarias sobre este diseño. He elegido esta plantilla por ser una de las más sencillas que hay en cuanto a su personalización, aunque también puede servirte tu plantilla actual si lo que deseas es hacer algunos cambios puntuales.

Antes de comenzar, es necesario que determines si quieres mantener las variables que trae por defecto la plantilla para poder cambiar algunas opciones en la sección “Fuentes y colores” del panel de Blogger, o si por el contrario las vas a eliminar para hacer cualquier cambio directamente en el código CSS. Yo personalmente recomiendo la segunda opción, ya que de esta forma el grado de personalización es mayor y seguramente no tengas ningún problema al alterar el código cuando acabe esta serie de posts. Estas variables, se encuentran definidas en la parte superior de la plantilla bajo el título “Variable definitions” aunque por el momento es mejor que las mantengas intactas hasta que cambies los colores y fuentes de cada parte del blog.

Body.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Este código hace referencia al cuerpo del diseño en su conjunto y establece el color o la imagen de fondo del blog, siendo esta su única utilidad. Los atributos que van precedidos con el símbolo del dólar $, indican que están definidos por una de las variables que mencionaba anteriormente y por tanto, tienes que cambiarlos por el valor numérico del color que hayas elegido en cada caso.

• Background: Fondo de la página. Puede ser un color (p. ej: #6c82b5;) o bien una imagen de fondo, en cuyo caso es aconsejable insertar una imagen reducidas dimensiones y hacer que se repita a lo largo y ancho de la página (p. ej: url(URL DE TU IMAGEN) top repeat-xy;). También puede interesarte añadir una imagen de fondo estática que se desplace junto con el scrollbar de la página incluyendo lo siguiente: url(URL DE TU IMAGEN) no-repeat fixed;
• Margin: Define el margen del elemento en cuatro direcciones distintas en el siguiente orden: arriba, derecha, abajo, izquierda (p.ej: margin: 5px 3px 4px 10px). En este caso no tiene mucho sentido modificar este valor.
• Color: Establece el color del texto con carácter general, es decir, se aplicará siempre y cuando no se modifique este valor en los restantes elementos de la plantilla, como puede ser el sidebar o el texto de los posts.
• Font: Tipo de fuente del texto. Puede ser Arial, Verdana, Times (no recomendada), Georgia, Trebuchet, Sans Serif, Courier, etc.
• Font-size: Determina el tamaño de la fuente de texto. Como puedes ver, este valor se encuentra duplicado pero puedes borrar ambos valores y obtener el mismo resultado dejando simplemente el código font-size: small;
• Text-align: Alineación predeterminada del texto siempre y cuando no se defina en cualquier otro elemento de la página.

Enlaces.

a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

Estos cuatro atributos precisan el aspecto que tienen los enlaces de texto y de imagen al actuar sobre ellos. Más concretamente:

• Link: Apariencia del enlace como tal antes de que el usuario pase el ratón por encima o haga click en el mismo. Puedes cambiar el color con el valor correspondiente y la decoración del enlace en text-decoration, que puede ser “none” (ninguna), “underline” (subrayado), “overline” (borde superior), “line through” (tachado) o “blink” (parpadeante). También es posible añadir un color de fondo en este apartado con el código background para resaltar aún más los enlaces de texto.
• Visited: Como su propio nombre indica, este valor precisa el aspecto del enlace una vez que ha sido visitado.
• Hover: Establece el color y la decoración del enlace cuando el visitante pasa el ratón por encima de este.
• Img: Estilo de una imagen cuando contiene un enlace hacia otra página web o parte del documento. Es muy útil para evitar que las imágenes que contengan enlaces aparezcan rodeadas con el típico borde de color azul.

Header.

Antes de comenzar a modificar el código del header, tienes que tener claras las dimensiones del blog y también el número de columnas que vas a necesitar. Más que nada, para que posteriormente no tengas que volver a diseñar tu imagen del título con un tamaño diferente al actual, ya que la imagen deberá tener las mismas dimensiones que las del ancho total de la parte útil del blog.

Desde hace unos meses, Blogger ofrece la posibilidad de insertar una imagen que sustituya al título y la descripción del blog en la parte superior de la página sin necesidad de modificar ni la plantilla de artilugios, ni el código CSS de la plantilla. Para ello, solo tienes que editar la cabecera del blog en la sección de elementos de página y subir una imagen desde tu propio PC, o bien añadir la dirección URL de la imagen. Después, guardas los cambios y puedes volver a editar la cabecera para ubicar la imagen como fondo del título y de la descripción o hacer que esta los sustituya.

También puedes incluir la imagen de fondo manualmente para asegurarte de que se ajusta a las medidas del blog de la siguiente forma:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: #000;
}

• Width: Ancho del header. Este valor tiene que ser igual al establecido en el atributo width del #outer-wrapper situado unas líneas más abajo, ya que este valor hace referencia al tamaño que tiene la parte útil del blog, es decir el ancho total en el que se incluyen la sección de los posts (main) y el/los sidebar/s. Por lo tanto, la imagen que añadas en el header también deberá tener el mismo tamaño de ancho que el del outer wrapper.
• Border: Borde del header. Dependiendo del estilo que vayas a darle al resto de la página, te podrá interesar modificar o no este atributo. Los tres valores que contiene son el grosor, el estilo y el color del borde por orden de aparición. Hay multitud de estilos disponibles, aunque no todos se ven igual en los mismos navegadores: none, dotted (puntos), dashed (guiones), double (doble), groove (hundido), ridge (resaltado), inset (interior) y outset (exterior). En todo caso, recuerda cambiar la variable $bordercolor por un color numérico precedido del símbolo #.
• Background: Aquí es donde debes añadir la dirección URL de la imagen de fondo. No te preocupes si no queda bien ajustada en la parte inferior o si no aparece la imagen por completo, ya que esto se puede solucionar con el valor “padding” en los siguientes apartados. P. ej: url(URL DE TU IMAGEN) top no-repeat;

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

Puedes eliminar este bloque de código con total seguridad, ya que no es necesario utilizarlo si vas a incluir una imagen de título. Al borrarlo puedes comprobar que el aspecto del header sigue siendo el mismo.

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

El bloque de código #header ya no tiene demasiado sentido, por lo que lo ideal sería copiar los valores que sean realmente necesarios en el apartado #header h1 y borrar el resto de atributos. Estos valores son text-align (alineación del texto) y color, quedando el código de la siguiente forma:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
text-align: center;
color:$pagetitlecolor;

• Line-height: Alto de línea. Cuando un texto ocupa más de una línea, este código define el espacio entre ellas. Al tratarse del título de la página, no creo que te haga falta modificar este valor.
• Text-transform: Transformación del texto. Convierte el texto al formato establecido, pudiendo ser uppercase (mayúsculas), capitalize (mayúscula la primera letra de cada palabra), lowercase (minúsculas) o none.
• Letter-spacing: Establece la distancia de separación entre cada letra.
• Variables: No olvides cambiar los valores establecidos con una variable por la fuente o el color que desees, en su caso.

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

Estos dos bloques se pueden utilizar para personalizar el aspecto del título cuando este se muestra como un enlace de texto, es decir, cuando se visita cualquier página individual perteneciente a un post concreto. Puedes cambiar la apariencia de este eliminando las variables y añadiendo las propiedades que consideres oportunas, al igual que hiciste con los enlaces de texto.

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Por último, este apartado es el encargado de personalizar la ubicación y el estilo de la descripción del blog. Seguramente tengas que jugar con los códigos margin y padding para definir la alineación de la misma dentro del header gráfico. Si ves que la imagen de fondo aparece cortada por la parte de abajo, siempre puedes aumentar el padding inferior de este bloque de código.

En el próximo artículo de esta serie de posts, podrás ver como añadir una nueva columna lateral o sidebar en tu plantilla, alinearla con respecto al main y ajustarla al tamaño de tu blog. Si tienes alguna idea, sugerencia o simplemente quieres dar tu opinión no dudes en dejar tus comentarios.

Resto de capítulos:

• Como crear una plantilla para Blogger – Primera parte: Composición y estructura.
• Como crear una plantilla para Blogger – Segunda parte: Temática y estilo.
• Como crear una plantilla para blogger – Cuarta parte: Distribución.

Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!