Mejora fácilmente el estilo visual de tu blog

Cuando decidimos crear un blog, en este caso con Blogger, lo primero que  hacemos después de registrar el nombre, es seleccionar la plantilla que más nos gusta y que se adecue a la temática de nuestro sitio.

En configuración cambiamos los colores, las imágenes del fondo, los tipos y tamaños de las fuentes e incluso la distribución de columnas y  gadgets. Pero  todavía no está lo bastante personalizado.

Llegados a éste punto es cuando tenemos que pelearnos con el código oculto tras la parte visual de nuestra plantilla.  Los que tienen nociones de HTML y CSS no tienen problema alguno. Personalizan sus blogs hasta crear apariencias gráficas espectaculares que casi nada tienen que ver con la inicial.

Con ésta entrada, de un modo sencillo y gráfico, voy a mostraros como se puede mejorar el aspecto de las entradas o de las páginas sin ser programador. Solo con ganas y un poco de paciencia lograrás buenos resultados.

En la imagen siguiente, podemos ver cómo serán las entradas de nuestro blog en cuanto al aspecto:

Entrada sin personalizar.

Sencillo tutorial de HTML.

Vamos a modificar nuestra entrada con una imagen de fondo donde estará el texto principal del artículo y remarcaremos nuestro título con un borde y un fondo de color. Algo así como el esquema de la imagen:

Esquema de los contenedores DIV.

Nos situamos en la parte de administrador de nuestro blog  y creamos en éste caso una entrada nueva, pero también podríamos hacerlo con una página.

Pulsamos en el botón HTML. Escribimos las etiquetas de los dos contenedores y le damos un nombre a cada clase, por ejemplo “titulo” para el encabezado y “texto” para el cuerpo. De ese modo nos será más fácil poder asignarle propiedades de estilo con código CSS:

Añadimos una etiqueta de encabezado <h2> para realzar el título de nuestro artículo y además facilitará a los motores de búsqueda y a los navegadores  encontrar el post:

El cuerpo de nuestro articulo lo situaremos justo después de la línea de apertura del contenedor, <div class=”texto”>.

 Si habéis escrito el texto en un procesador, como suelo hacer yo, copiamos y pegamos a continuación del código. Los que quieran, pueden hacerlo directamente:

Para mantener la estructura de párrafos, colocamos dos etiquetas <br/> de salto de página para facilitar la lectura.

La parte de modificar el código HTML ya la hemos finalizado. De momento no se aprecian los cambios estéticos porque de eso se encarga el código CSS. A continuación podemos ver como se muestra nuestra entrada:

Nuestra entrada sin estilos.

Cómo dar estilo con CSS a nuestra entrada o página.

El código CSS es el encargado de dar estilo y vistosidad a las páginas web. Aunque visto a simple vista pueda parecer un lenguaje algo muy complicado, si lo estudiamos con un poco de calma, podemos apreciar que es un lenguaje lógico y sencillo.

Para insertar nuestro código en la entrada, dentro del editor y antes del las instrucciones HTML, escribimos la etiqueta <style> con su propiedad <type> para  indicar a los navegadores que lo que sigue es código CSS:

Acordaos siempre de escribir ya la etiqueta de cierre, de ese modo no se os olvidará y evitareis tener que revisar más tarde todas las líneas del código para encontrar el error.

N Para saber más sobre HTML:

Puedes visitar éstos enlaces que te ayudarán a conocer mejor el lenguaje de marcas de un modo ameno y sencillo.

http://www.ciudadano2cero.com/tutorial-html-basico-blog/

http://daleclick.blogspot.com.es/

http://trucosblogsblogger.blogspot.com.es/

Ponemos el cursor entre ambas etiquetas para darle estilo a nuestro post. Como al contenedor de nuestro encabezado le habíamos asignado la clase “titulo”, para hacer referencia a él en CSS escribiremos .titulo seguido de los signos { } y dentro de ambas irán las propiedades que modificarán su aspecto visual.

Las primeras propiedades que añadiremos serán el ancho y el alto del contenedor. El valor por defecto será auto, porque de ese modo, se ajustará a la longitud y tamaño de caracteres de nuestro encabezado.

Añadimos un color para el fondo. También podría ser una imagen, pero para este ejemplo básico lo dejaremos en un color. El valor puede darse en  hexadecimal (#ff6633) o en RGB (255, 102, 51). Aquí os dejo un enlace a una tabla de colores HTML y a un conversorHTML-RGB. Ambos pueden seros de utilidad a la hora de personalizar fondos y textos.

Pasamos ahora a darle valores a los márgenes de nuestro contenedor para que aparezca centrado en nuestra entrada. Los valores se los damos a la propiedad margin de todos los lados excepto el superior. Padding es la propiedad que separa el contenido de los bordes del contenedor. Al no especificar lado, indicamos que el valor afectará a todos.

Código CSS.

Como podemos ver en la imagen superior, border-radius es la propiedad encargada de redondear las esquinas de los contenedores. El lenguaje CSS es muy intuitivo y más si tenemos conocimientos básicos de inglés, porque como podéis apreciar, los nombres de las propiedades nos definen su función. Los cuatro valores en pixeles corresponden a las cuatro esquinas. Y os preguntareis ¿por qué aparece tres veces repetida? Eso se debe a que cada navegador, por poner un ejemplo sencillo, no comprende por igual todas las propiedades de CSS; de ahí que haya que añadir un prefijo distinto según sea.

Para acabar con el título solo nos queda añadir la propiedad que nos lo alinea al centro del contenedor.

El cuerpo principal de nuestra entrada se inserta en el contenedor, al que accederemos   para modificar sus propiedades, con el nombre de clase .texto. Como se ve en la imagen, las propiedades son iguales y por tanto omitimos volver a explicarlas.

Destacar que en éste caso, pondremos una imagen como fondo del contenedor, teniendo que añadir la dirección URL del lugar donde la tenemos alojada; ya sea un servidor o una  carpeta de nuestro ordenador.

Imagen para el fondo.

 Para terminar con el código CSS, seleccionamos un color, tipo de fuente y el estilo negrita para el texto del encabezado h2 y le damos una separación del borde del contenedor.

Código de nuestra entrada.

De vuelta en el código HTML añadimos la foto manualmente si conocemos su ruta o de lo contrario, pasamos al modo “redactar” de Blogger y la insertamos en la posición que más nos guste entre el texto.

En la siguiente imagen podemos ver el cambio con el post original. Ahora que tenemos clara la base, podemos experimentar con distintos tipos y colores de borde, imágenes o texturas para los fondos e incluso experimentar con el número de contenedores <div> que añadir a la entrada.

En futuros artículos, iremos complicando un poco más el código para obtener resultados visuales mucho más impactantes. Y si no podéis esperar hasta entonces, puedes descargarteaquí  una guía sobre HTML o visitarésta web sobre CSS.

Entrada personalizada.

Para que podáis practicar este tutorial, os dejo un enlace desde el que podréis descargar un archivo con el código HTML y CSS que hemos usado. Tan solo tendréis que añadir vuestros colores, fondos y texto al código e insertarlo en vuestra entrada o página del blog.

Pincha aquí para descargar
el código del tutorial.

Si te ha gustado el artículo, te ha parecido interesante o útil, compártelo en las redes para que otros puedan disfrutarlo.

Si quieres preguntar alguna duda al respecto, tienes sugerencias o simplemente dar tu opinión sobre el post, no lo dudes. Tus comentarios ayudan a mejorar.

Muchas gracias por compartir vuestro tiempo y hasta el próximo tutorial.