8 ago. 2016

Cómo personalizar la plantilla de tu blog en Blogger

Si te has decidido por Blogger como plataforma para tu blog, supongo que querrás que el aspecto que tenga sea interesante, chulo y personalizado. Tranquilo, que para eso estamos aquí hoy, para modificar y reestructurar el aspecto del blog y personalizar la plantilla hasta quedar contentos con ella. 

Hay mucha gente que piensa que en Blogger no puedes tener un blog con aspecto profesional. Yo estoy totalmente en contra. Y te voy a poner un ejemplo: Read Infinity. El blog de Alicia está alojado en Blogger y quien diga que no es original y con una apariencia bien curada es que no lo ha visto. Aquí vamos a aprender a dar los primeros pasos para personalizar la apariencia de tu blog.

Como siempre voy a ir paso a paso, tranquilo y sin prisas, explicándote cómo poder hacer cada cosa, pero soy consciente de que la personalización de plantillas de Blogger es compleja y abarca numerosas opciones. Por eso voy a ir añadiendo enlaces que amplían este tutorial. Como un tronco principal con el que aprenderás a manejarte para diseñar lo principal con numerosas ramas laterales para añadir modificaciones extra. 


CÓMO PERSONALIZAR LA PLANTILLA DE TU BLOG EN BLOGGER

¿Cómo se puede modificar el aspecto de un blog?

Antes de empezar a meternos en el tema vamos a hablar de las tres formas que existen para modificar la apariencia de tu blog:

Editar el código HTML: bastante complejo si, como yo, no tienes amplios conocimientos de informática. Aún así, hay webs que te ayudan mucho a hacer modificaciones en el código. Normalmente te dicen que busques una línea específica (pulsando Ctrl+F sale una barra de búsqueda en el navegador) y que la sustituyas por otra que te dan ellos. Aún así es la parte más difícil.

- Editor de plantillas de Blogger: muy intuitivo y fácil de usar. Iremos paso a paso viendo qué se puede modificar y cómo para que tu blog quede claro, sencillo y fácil de visualizar por cualquier usuario. 

- Plantillas externas: la tercera opción es buscar plantillas creadas por otras personas (con más conocimientos que yo seguro sobre edición HTML) e instalarlas en tu blog. Más adelante hablamos también sobre cómo hacer esto y dónde buscar plantillas.

¿Qué aspecto debe tener un blog?

Sea mediante edición HTML, con el editor o instalando plantillas externas, debes tener muy claro qué aspecto quieres que tenga y para qué está enfocado, es decir, qué es lo que vas a publicar en él.

No es lo mismo un blog de moda, por ejemplo, o de un ilustrador, en el que la información visual es la más importante, que el blog de un escritor o un blog de cocina. En los primeros tendrás que crear una plantilla donde las imágenes se vean bien claras, ya que es lo que la gente irá buscando. En los segundos, la imagen es un apoyo, pero no el contenido principal.

Supongo que tu caso es de los segundos, es decir, buscar una plataforma en la que publicar relatos, dar tu opinión sobre temas, hacer reseñas, analizar algo sobre algún tema... Vamos, un blog en el que prima lo escrito (como es el caso de este blog). En ese caso yo te recomiendo que sigas este esquema básico:


¿Por qué una sola barra lateral? Pues muy sencillo, porque si pones dos o amplías mucho el ancho total del blog (lo que puede no ser recomendable) o dejas que el cuerpo principal sea demasiado estrecho (lo que no es recomendable en absoluto porque pierde visibilidad). Eso sí, la barra puede ser a la derecha o a la izquierda. 

En el tutorial anterior hablaba sobre la creación de páginas, ¿recuerdas? Pues bien, esas páginas deben ir en la barra que hay debajo del título o en la barra lateral. Para añadirlas, nos vamos a Diseño en el escritorio y añadimos el Gadget de páginas tal y como muestro aquí:


Es muy importante que estas páginas estén accesibles a los usuarios de alguna forma, ya que si no lo están, Google puede penalizarte por tener contenido publicado al que no se puede acceder. Cuestiones de SEO, ya me entiendes, así que más te vale tenerlas a la vista.

Otras recomendaciones para crear/elegir una plantilla:
- Usa letra sans serif o palo seco en el cuerpo del blog, ya que es más fácil de leer en todos los dispositivos. 
- Letras negras (u oscuras) sobre fondo blanco es lo mejor y más fácil de leer. Las letras blancas sobre fondo negro cansan a la vista.
- La plantilla cuanto más sencilla, mejor.
- Ten las redes sociales bien a la vista.
- Sé constante en el uso de colores y de tipografías. Forman parte de la estética de tu blog. Yo por ejemplo uso siempre colores rojos para los encabezados, va reforzado por la cabecera del blog también con los mismos colores. Un ejemplo de blog con colores muy bien usados es el blog de Alister Mairon (y encima el contenido es increíblemente bueno). 

Editor de plantillas de Blogger

Vamos a empezar por saber cómo modificar las plantillas de Blogger. Para ello nos vamos al editor de plantillas desde el Escritorio de Blogger > Plantilla:


El editor de Blogger nos ofrece diferentes plantillas preparadas de antemano, agrupadas en diferentes categorías. Excepto las dinámicas, que ofrecen menos posibilidades de personalización, el resto pueden ser una buena base para empezar. Aunque, ante la duda, ya lo he dicho: la más simple. 


Lo primero que vamos a hacer es ajustar el ancho del blog. El ancho del blog es algo muy importante, ya que va a suponer que se vea bien o no en las diferentes pantallas (excepto si es una plantilla responsive, pero eso es edición demasiado avanzada). Yo recomiendo usar la siguiente configuración:


¿Por qué 1024px? Pues muy sencillo: por la resolución de las pantallas. Antiguamente la mayoría de pantallas tenían una resolución de 800x600, por lo que nos interesaría poner un ancho de 800. Pero hoy en día la mayoría de las pantallas tienen mayor resolución, en torno a los 1280px. ¿Por qué no usar entonces un ancho de 1280px? Pues porque aún hay un 20% aproximado de usuarios que usa pantallas 1024px y no hay que menospreciar ese porcentaje. 

El ancho de la barra lateral ponedlo a vuestro gusto ;)

En Diseño es donde puedes elegir si tener una sola barra lateral o varias. Yo recomiendo usar sólo una:


Después de ajustar el ancho podemos preocuparnos de la siguiente parte, en el botón de Avanzado. Aquí podemos modificar TODO lo que sale en el blog. La fuente y los colores tanto del título del blog como de los gadget o del cuerpo de las entradas. También modificas el color de fondo, el color del fondo de las entradas, de la barra de páginas...


Aquí ten en cuenta ser uniforme en el uso de colores y fuentes. Interesa más usar una sola fuente para todos los títulos (tanto de gadget como de entradas) que usar mil fuentes diferentes. El usar una sola fuente da una sensación de claridad. En cuanto a los colores, elige dos (o tres) colores principales y úsalos a lo largo de toda la plantilla

Una vez hechos todos los cambios, dale a guardar (parte superior derecha) y volvemos a Blogger.

Para ampliar en formato visual he encontrado este vídeo ;) 

Si quieres personalizar mucho más la plantilla te dejo con tres blogs geniales con trucos para personalizar:

Seguro que en esos tres blogs encuentras (casi) todo lo que quieras y necesites, porque son increíblemente completos. 

Y si te peleas mucho puedes hablar con Alicia de Read Infinity para que te diseñe paso a paso la plantilla que quieras (precio con tarifa plana aunque le pidas mil cosas). 

Instalar plantillas externas

Si aún y todo eso de diseñar tu propia plantilla no te convence hay páginas webs que tienen plantillas gratuitas (y de pago) para Blogger. Cuidado con estas plantillas, muchas de las que se ofrecen de forma gratuita tienen los códigos mal escritos, por lo que da fallos. Esto lo hacen, básicamente, para que uses la versión de pago de la plantilla. 

Por esto yo te recomiendo usar las plantillas de estas webs, que son bastante buenas, tienen un amplio repertorio y, además, no tienen esos inconvenientes (la versión de pago lo bueno que tiene es que te la instalan ellos, ponen tus redes sociales, las modifican a tu gusto y tienes soporte gratuito de por vida).

- Premium Blogger Templates (tiene algunas de pago)

Mi favorita de estas webs es Gooyabi Templates, ya que en el archivo que te descargas (un .zip) suele incluir un enlace para saber cómo modificar la plantilla (en la carpeta Documentation y el archivo Index). 

Pero bueno, vamos a lo importante, ¿cómo instalar una plantilla? Esto es muy fácil. Nos vamos al apartado de plantilla de blogger y le damos a Crear/Restablecer copia de seguridad. 



Nos descargamos la plantilla que tenemos (por si no nos gusta la nueva después de instalarla) y después le damos a Seleccionar archivo, buscamos el archivo XML (que nos habremos descargado de alguna de las webs de arriba) y lo subiremos. 


Ya está, ya tenemos subida la plantilla, ahora nos falta modificarla. 

Para ello nos hace falta usar el código HTML de forma casi inevitable. Excepto para la posición de gadgets (que podemos seguir usando el apartado de Diseño del escritorio de Blogger), el resto de modificaciones deben hacerse mediante HTML. Por ejemplo, si viene con redes sociales incorporadas, tendrás que buscar en el código las distintas redes (Facebook, Instagram...) y sustituir el enlace que viene por el enlace a tu página de Facebook o a tu usuario de las diferentes redes. Si no tienes una red, tendrás que borrar esta parte del código para que no te aparezca. 

Como ves, hay plantillas muy chulas, pero instalarlas y modificarlas es bastante más complicado si no sabes cómo hacerlo, aunque siempre puedes hacerte un blog de pruebas al que instalar y modificar la plantilla para ver cómo va quedando. Cuando consigas el resultado que te guste, lo descargas y lo instalas en tu blog.

Si tienes alguna duda, puedo intentar ayudarte a arreglarlo. Mándame un correo (dragonmecanicoblog@gmail.com) o déjame un comentario.

Espero que te haya sido útil, así que compártela para que le resulte útil a más gente ;) 

Termino con una pregunta: ¿tienes un blog? Dímelo en los comentarios y si tienes algún truco para modificar la plantilla, también :D 

8 comentarios:

  1. Muy interesante el artículo. Me ha llamado la atención lo de la anchura de 1024px, porque es un detalle a tener muy en cuenta y que se nos suele pasar.

    Un saludo, desde «Con Pluma y Píxel»

    ResponderEliminar
    Respuestas
    1. Es una introducción básica pero necesaria. No se puede correr sin saber andar, y la edición de plantilla de un blog puede llegar a ser muy compleja.

      Lo de 1024 es sobre todo si no la tienes responsive. Y parece una tontería, pero no lo es.

      Un saludo y gracias ^^

      Eliminar
  2. Hola, otra vez.

    Que articulo tan más interesante. Me ayudo mucho para poder colocar las medias y elegir los gadgets, de mi página.
    Ni siquiera sabía que había una barra para ajustar el ancho del blog.

    Gracias por la información.

    ResponderEliminar
    Respuestas
    1. Me alegra mucho que te haya sido útil. Son conceptos básicos, pero hay muchas entradas que dan por sentado que el lector tiene muchas cosas aprendidas de antes y no siempre es así.

      Un abrazo ^^

      Eliminar
  3. ¡Rafa, muchas gracias por la recomendación! :D
    Un gustazo de artículo y los tres blogs que recomiendas son buenísimos. Te dejo también el de Miss Lavanda (aunque ya no actualiza), el de Personalización de Blogs y el sitio web de Ciudad Blogger. Esos tres fueron mi salvación cuando empecé en este mundillo jajaja.

    ¡Un besazo enorme y gracias otra vez!

    ResponderEliminar
    Respuestas
    1. Si es que tu blog es muy bueno ;)
      Me apunto los que me has dicho, que no los conocía. A ver si poco a poco voy pillando más trucos.

      ¡Un beso!

      Eliminar
  4. Hola, quería preguntarte una cosilla a ver si me puedes ayudar, resulta que hace poco me descargue una plantilla y la puse en mi blog, pero no me deja realizar cambios.
    Quiero centrar la imagen de la cabecera y el menú, pero me resulta imposible!!
    mi blog es: www.unaeducacionparatodos.com

    gracias!!!

    ResponderEliminar
    Respuestas
    1. Para modificar la plantilla instalda tienes que hacerlo desde código, no te vale con el modificador de plantillas. O con CSS como explican aquí de forma muy clara: https://www.thelittlecoccinelle.com/2015/11/centrar-cabecera-blog-descripcion.html

      ¡Espero que te sea útil!

      Eliminar

Suscríbete para no perderte nada

* indicates required

¿Qué estoy leyendo?

Manual de Autopublicación
tagged: currently-reading
El caso del artista cruel
tagged: currently-reading

goodreads.com