Personalizar plantilla

En estos momentos te introduces en la red y puedes encontrar infinidad de plantillas gratuitas y de pago. El problema viene en que cuando escogemos una que nos gusta en verdad, siempre tiene algo que no nos agrada mucho.

Por eso la mejor manera sería aprender CSS y personalizarla a gusto. Es muy fácil hacerlo, con unos sencillos pasos, en ello solo importa la imaginación de cada uno para ponerla a gusto.

La plantilla más adecuada para modificar es la mínima de Blogger. Con una interfaz muy simple y los códigos bien organizados, lo que permite, si estamos comenzando, sabernos ubicar mejor en el HTML.

Para comenzar la personalización, nos situamos en nuestro Escritorio/Diseño/Edición HTML. No es necesario expandir artilugios, pues solo trabajaremos con CSS:

Ubicamos .post-body { y añadimos un borde con:
border: 1px solid #cc6666;

Comprobaremos en vista previa y veremos que no queda espacio entre el borde y el texto entonces añadiremos más espacio con:
padding: 5px 5px 5px 22px;

Para decorar un poco más ese espacio podemos añadirle también un color de fondo con
background:#ffffff;

O si preferimos una imagen con background:url(’url-de-la-imagen’);

Incluso redondear esas esquinas con:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

( visualizado con Explorer el efecto esquinas redondeadas se pierde y en su lugar quedan líneas rectas)

border: 1px solid #cc6666;
padding: 10px 5px 10px 22px;
background:#ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px; }

El resultado sería el siguiente:

Si deseamos añadir el mismo efecto en el footer y que las etiquetas, autor, fecha y demás también tengan la misma imagen ubicaremos .post-footer { y añadimos las mismas líneas que en .post-body {

Para la sidebar nos encontraríamos con la necesidad de una pequeña modificación en:

.sidebar .widget, .main .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Creamos dos secciones con ese código de forma que sean independientes y eliminamos el anterior.

.sidebar .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Le añadimos las líneas de código igual que en .post-body {
pero solamente en .sidebar .widget {

.sidebar .widget {
border-bottom:1px dotted #cc6666;
margin:0 0 1.5em;
padding:0 0 1.5em;
border: 1px solid #cc6666;
padding: 10px 5px 10px 22px;
background:#ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

Mientras hacía esta entrada me entretuve añadiendo una imagen de fondo a la plantilla y unos iconos a los títulos de la sidebar, la diferencia es bien palpable.

Personalizar la plantilla no quiere decir que sigas estos pasos, únicamente se intenta orientar y sobre todo animar para que pierdas el miedo a manipular tu plantilla, seguramente tendrás mil ideas y puedo asegurar que cuando las lleves a la práctica quedarás asombrado de las posibilidades que tenemos a nuestro alcance.

¡Suerte!. ¡Manos a la obra!.

Escrito por: Gem@ BLOG. Imágenes: Gem@ BLOG.

This entry was posted on Tuesday, May 26th, 2009 at 9:37 am and is filed under Themes, Trucos, blogger, diseño, general, plantillas. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.