Cambiar el aspecto de nuestro blog en Blogger

Hoy en Bloguismo vuelve a escribir Álvaro con sus tutoriales para Blogger: aprenderemos a retocar el diseño de nuestro blog en Blogger y a incluir un botón para votar nuestros artículos en Bitácoras.com

web
Hace dos semanas pusimos en marcha nuestro blog y creamos nuestra primera entrada. Supongo que habréis seguido escribiendo y quizá hayáis pensado en darle algún retoque a la plantilla del blog. De inicio, Blogger nos sugiere varios temas predefinidos, pero hoy vamos a buscar otros, a instalarlos y a retocarlos un poco.

Lo bueno que tiene Blogger con respecto a otras plataformas de blogging gratuitas es que se puede modificar el código de la página. No tanto como si tuviéramos el blog en un hosting de pago y con WordPress, pero si lo suficiente como para darle nuestro toque personal a cualquier tema.

Elegir y cambiar la plantilla de nuestro blog es un gran paso. Hay que dedicarle el tiempo que haga falta y no apresurarse. No hay peor cosa que seguir un blog en el que se cambie de tema cada pocos días. En la mayoría de las páginas donde elegir temas se pueden ver demos a pantalla completa de cómo quedaría ese tema, así que no es necesario bajarlo e instalarlo para ver como queda. Aun así, lo ideal es que nos creemos un blog de prueba y que le hagamos todos los cambios y probemos lo que queramos sin molestar a nuestros lectores en el blog principal.

Hay muchísimas webs que ofrecen y catalogan plantillas para Blogger. Yo os voy a recomendar una página que tiene muchas plantillas a elegir y además muy bien organizadas.
La web es Blogger Templates. Al entrar veremos algunas plantillas de muestra, normalmente las más recientes. Pero lo verdaderamente interesante está en la barra lateral.

Todas las plantillas están catalogadas por: el número de columnas, estilos, colores, la posición de la barra lateral, y por los más bajados, vistos y mejor puntuados.
Así que, si por ejemplo queremos que nuestro blog sea de color azul es tan fácil como ir al enlace de ese color y se nos mostrarán las plantillas donde el azul es el color predominante.
Lo mismo si lo que tenemos claro es que sea de 2 columnas, o queremos la barra lateral a la derecha, que sea minimalista, etc…

Hay también una opción que son temas adaptados de WordPress. Así que si habéis visto una plantilla que os ha gustado mucho pero era para blogs de WordPress, no os deis por vencidos, puede que esté allí. Como ya he dicho antes, que no os puedan las prisas a la hora de cambiar la plantilla, probad las que hagan falta.

Bueno, pues si ya nos hemos decidido por una, vamos a subirla al blog.
Nos descargaremos la plantilla que queramos y la descomprimimos. El archivo que nos va a servir será uno con la extensión .xml.
En nuestro escritorio de Blogger, nos vamos a “Diseño – Edición de HTML” y en seleccionar archivo elegimos nuestro archivo de plantilla, el que os he dicho que acaba en .xml.
Hacemos clic en Subir y en unos pocos segundos lo tendremos instalado. Es posible que una vez subido nos salga un mensaje de error y nos diga que se van a cambiar algunas cosas, es normal, suelen ser incompatibilidades de las barras laterales del diseño anterior con el nuevo.

captura 2009-12-09 at 08.02.12

Como ya os he dicho, habrán surgido incompatibilidades con la barra lateral, por lo que lo mejor es que vayamos a “Diseño – Elementos de la página” y la configuremos a nuestro gusto.

captura 2009-12-09 at 08.02.34

Tendremos que buscar los gadgets, que son los elementos que podemos incluir en la barra lateral, y añadir los que queramos. Recomiendo instalar, si la plantilla no los incluye por defecto ya, gadgets para: búsqueda, de lista de enlaces o blogs para enseñar qué blogs leemos y recomendamos, el del feed RSS para que la gente se pueda suscribir fácilmente, otro para las etiquetas, para que se muestren las que utilizamos más a menudo y otro para el archivo del blog. Además, como Juanan explicó hace poco aquí mismo, podéis añadir también algún widget para suscripciones por email. Los gadgets que vayamos añadiendo se pueden reordenar pinchando y arrastrando cada uno.
Esos yo creo que serían los básicos. Si tenemos Twitter por ejemplo, también podemos buscar algún gadget que muestre nuestros últimos tweets y que invite a la gente a que nos siga.
Todo es investigar y añadir lo que queramos.
Eso sí, con prudencia, que no es nada agradable ver un blog con una barra lateral hecha un desastre, llena de cosas, fotos, vídeos, calendarios, etc…

captura 2009-12-09 at 08.02.45

Eso es todo lo relacionado con la instalación de la plantilla, pero como ya os he comentado, en Blogger es posible modificar el código HTML para dejarlo más a nuestro gusto.
Así que os voy a enseñar a insertar el botón de Bitacoras.com en vuestros posts para que vuestros lectores los puedan votar.

En “Diseño – Edición de HTML” nos descargamos la plantilla que tenemos instalada haciendo clic en “Descargar plantilla completa”. Una vez descargada, lo primero de todo será hacer una copia de seguridad. Podemos copiarla y pegar la copia en la misma carpeta para tenerla bien a mano. Es muy importante descargar la plantilla y hacer una copia de seguridad, por si nos equivocamos en algo poder volver a subirla y dejar el blog tal y como estaba antes.
Ahora nos vamos a esta página de Bitácoras donde tenemos los códigos para cada tipo de botón, elegimos el que más nos guste y copiamos el código.
Los cambios en la plantilla del blog recomiendo hacerlos con el archivo que nos hemos descargado y con un programa de editor de texto, pero también se pueden hacer desde la propia página de edición de HTML de Blogger si marcamos la casilla de “Expandir plantillas de artilugios”.
En nuestra plantilla tendremos que buscar la siguiente línea entre divs:

post-footer-line post-footer-line-1

A partir de esa línea es donde tendremos que pegar el código del botón que hayamos elegido. Depende donde lo coloquemos el botón saldrá en un sitio u otro, eso ya depende de cada plantilla, así que os animo a que vayáis probando vosotros sin ningún miedo. Como tenemos (o deberíamos) la plantilla original guardada y sin modificar, si lo ponemos donde no toca y estropeamos el diseño no tenemos más que volver a subir la antigua plantilla y volverá todo a quedar como antes. Recomiendo también hacer estos cambios en horas donde no tengáis muchas visitas al blog, como tarde por la noche, así no habrá mucha gente viendo esos cambios en directo.
Una vez colocado el botón en el sitio que queramos, nuestros lectores tendrán bien a mano el botón para votar los artículos que les vayan gustando.
Algo a tener en cuenta es que cada vez que cambiemos de plantilla, tendremos que volver a colocar el botón, conviene no olvidar esto.

Si con todo esto del HTML os perdéis, os recomiendo un tutorial con el que yo aprendí lo que sé. Lo ideal de ese tutorial es imprimirlo y encuadernarlo, así se hace mucho más fácil la lectura y el aprendizaje. Se llama “Introducción al XHTML” de Javier Eguíluz Pérez y tiene licencia Creative Commons.
Aun así, iremos tratando temas de edición de HTML para nuestro blog en las próximas semanas.

Bueno, hasta aquí el artículo de hoy. Hasta ahora hemos creado el blog, empezado a escribir y hoy hemos aprendido a cambiar visualmente el estilo de nuestro sitio y darle un toque más personalizado con el botón de Bitacoras.
Dentro de dos semanas seguiremos con nuestro camino, como ya dije, paso a paso, sin prisa pero sin pausa. Cualquier duda no os cortéis en preguntarla en los comentarios.

  1. Genial entrada…
    Me va a venir de perlas para plantearme ya en serio el cambio de diseño del blog de mi mujer, está todavía con una plantilla “de serie” de blogger y la cosa va creciendo y creo que hay que darle ya un toque más personal
    Enhorabuena!

  2. Martín Codax 9-12-2009, 11:01

    Impresionante, Álvaro!!! Absoluta claridad meridiana en tus explicaciones. Siempre hago esta pregunta de lego a los que sabéis más que yo en estas lides:
    ¿Creéis que algún día se invente algo para que los profanos no tengan que tocar el html y haya botones que se traduzcan en tal o cual comando, sin necesidad de conocer el lenguaje de programación?
    Veo que para ciertas cosas sigue siendo imprescindible tener cierto rodaje con el html.

  3. […] This post was mentioned on Twitter by Angel L Benito and Álvaro, Consejos para blogs. Consejos para blogs said: hoy vuelve @alvaroprb con Blogger, cómo cambiar el diseño y añadir un botón de @bitacoras : http://ow.ly/K9wa […]

  4. Me parece un post interesante y didactico de cara a gente como yo, que no tiene ningún tipo de conocimiento respecto a internet, solo a nivel de usuario.
    En mi caso concreto soy un amago de blogero y tengo alojado mi blog en wordpress, mi pregunta es¿seria posible que hicieras un post similar a este para esa plataforma?

  5. Gracias Guarroman! Anímate a ayudar a buscarle a tu mujer una plantilla de la página que comento, así como dices tendrá un toque más personal!

    Gracias también Martín! Sobre lo que preguntas, WordPress (el de pago) no te evita tener que tocar algo de código pero he aprendido una cosa en el mes que llevo usándolo, que hay plugins para casi todo con los que te evitas tocar mucho código que en Blogger o en WordPress gratuito sí tienes que hacer.

    Me alegro de que te haya gustado también Jesús.
    Sobre lo de hacer posts de temática similar pero centrados en WordPress, el “trabajo” que tengo asignado aquí es para hablar sobre Blogger, así que esa pregunta dejo que la responda Juanan 🙂

    Un saludo a todos!

  6. […] escribimos acerca de qué diseño escoger para un blog, mientras que Álvaro ya ha comentado cómo cambiar el aspecto de nuestro blog en Blogger. Ahora sólo queda lo más difícil: que tengas […]

  7. […] Otro miércoles más y aquí me tenéis con otro mini tutorial para Blogger. En este caso vamos a enfocar nuestro blog hacia una de las grandes redes sociales que hay ahora, Twitter. Os enseñaré a agregar un gadget a la barra lateral donde se mostrarán nuestros últimos tweets y añadiremos un botón al lado del título de cada post con el que la gente podrá retwittear nuestros artículos de una forma sencilla, algo parecido a lo que hace el botón de Bitácoras y de lo que ya os hablé hace tiempo. […]

  8. no me deja poner el fondo, me apareció lo del error, pero digiste que lo ponía igual. Ya probé con 2 y no funciona con ninguno.

  9. Hola! muy buen post! Te escribo porque quisiera saber si se puede cambiar la posición de los botones que se colocan en el post-footer-line de manera que queden todos alineados y no unos por arriba y otros por abajo. Se les puede especificar la posición con alguna función???. Muchas Gracias!

Comments are closed.

Shares
Share This

Share This

Share this post with your friends!