6 nov 2013

Personaliza tu plantilla Blogger. Aprende las claves y pasos fundamentales a tener en cuenta para renovar la presentación de tu Blog.


La presentación de un blog está constantemente cambiando y adaptándose, es algo "vivo". El Blogger siempre está buscando mostrar sus contenidos de la mejor manera posible, exhibir sus imágenes y creaciones de una forma que resulte atrayente a sus seguidores.

Si bien "dar" con una presentación que se adapte a nuestras necesidades es una tarea de búsqueda que casi nunca concluye en un punto determinado, encontrar un entorno con el que nos sintamos cómodos es fundamental: en primer lugar para expresarnos y dar rienda suelta a nuestra creatividad, en segundo lugar como motivación para disfrutar mostrando nuestras creaciones bajo un diseño con el que nos encontremos a gusto.



Para realizar cambios de este "calado" es necesario, si no tenemos conocimientos en la creación de componentes de presentación para nuestro Blog, recurrir a la utilización de plantillas. Elegir una buena plantilla y retocarla según tus necesidades o tomar partes de una y utilizarlas en la tuya, te ayudará a conseguir esa presentación que siempre has querido y que tan atractiva puede resultar para tus usuarios.

No obstante, hay múltiples detalles a tener en cuenta al utilizar esta clase de elementos pues existen por miles en Internet y elegir el adecuado no siempre está exclusivamente relacionado con la imagen sino también con la eficiencia. Voy a darte algunos consejos y ayudas para elegir bien y saber aplicar la plantilla que mejor encaja con tu Blog.




Conceptos previos, ¿qué es "la plantilla" en Blogger?:


En el lenguaje más abstracto y menos técnico, la plantilla es el modelo de presentación sobre el que vas a trabajar para mostrar los contenidos de tu Blog. Se le denomina plantilla porque va a definir dónde y cómo se van a mostrar tus contenidos en el Blog. Por ejemplo, define dónde va a ir colocada la cabecera con el título del blog, qué tipos de letra se van a mostrar, con qué colores, qué componentes van a "dibujarse" y cómo van a hacerlo... es la base de la presentación que verán tus usuarios cuando accedan a tu Blog.

En un plano técnico, la plantilla es una representación esquemática realizada en XML que sintetiza código HTML en etiquetas "propias" de Blogger que al ser interpretadas conforman la presentación del blog.


¿Qué conforma una plantilla Blogger?


Si nos alejamos de la parte técnica, en la plantilla encontraremos cómo vamos a mostrar los componentes que conformarán el Blog junto con el aspecto que éstos tendrán.

Casi todas las plantillas suelen utilizar una barra de navegación que suele ocultarse para pasar de un Blog de Blogger a otro, una cabecera para el título, una zona donde residirán las entradas y un "pié de página" que remata el conjunto por la parte inferior. Dependiendo después del diseño que se desee aplicar luego podrá tener o no tener columnas laterales, mostrar las entradas de una manera determinada, una imagen de fondo o un color que abarque todo el blog, etc...

Dentro de esas bases de la plantilla, a los componentes que dentro de ella se dibujan se les llama Gadgets. Los hay de todos los tipos, formas, tecnologías y colores, es cuestión del usuario elegir aquellos que desea utilizar.

De nuevo en el apartado técnico, para darle formato a cada componente que motramos en cada zona de la plantilla se utilizan las hojas de estilo (conocidas como css)  y para la lógica que pueden tener algunos componentes (los +1, botones de cualquier clase, "gadgets" con animaciones, etc...) se utiliza el Javascript.

¿Qué tipos de plantillas hay?


Vamos a abstraernos de nuevo al máximo y nos centramos en dos grandes grupos: las creadas en Blogger y las generadas fuera de Blogger.

La herramienta de Google trae "de serie" un catálogo de plantillas "todo terreno" que abarcan un amplio espectro de las necesidades que los usuarios de Blogs podemos tener. Estas plantillas están lo suficientemente probadas y utilizadas como para que gocen de una gran estabilidad, de pocos fallos y sean fácilmente configurables al encontrarse dentro del estándar.

Las que han generado usuarios fuera de Blogger son plantillas realizadas con la "misma tecnología" o más bien, misma base que las plantillas por defecto pero con múltiples modificaciones que alteran en gran medida la presentación original de éstas.

Claramente, utilizar las plantillas por defecto que trae Blogger da lugar a que la misma presentación escogida por un usuario para un Blog se pueda ver repetida en otro que ha decidido utilizar la misma plantilla.

¿Cómo puedo cambiar la plantilla de mi Blog por una que traiga Blogger por defecto?:

Es extremadamente sencillo, seleccionas en el menú de la izquierda la opción "Plantilla" para a continuación seleccionar la que prefieras del catálogo:


  • Después de seleccionar en el menú izquierdo plantilla, te aparecerá una pantalla como la mostrada en la parte superior de este texto.
  • Seleccionas después el tipo de presentación que quieres darle, escogiendo de las imágenes que se encuentran bajo "Sencillo", "Vistas dinámicas", etc... la presentación o plantilla que más concuerde con tus necesidades.
  • También una vez elegida la plantilla puedes personalizarla accediendo al menú "Personalizar":

  • Ahí podrás cambiar el fondo, los tamaños, el estilo y la presentación en general. Podrás alterar la plantilla por defecto con algunas modificaciones básicas.


¿Qué tipos de gadgets hay?


Al igual que sucede con las plantillas, Blogger incorpora un catálogo de Gadgets propios o generados ad-hoc para su aplicación para Blogs.

Fuera de Blogger existen creados para Blogger miles de Gadgets que también pueden ser escogidos para formar parte de una plantilla de un Blog.

¿Cómo puedo cambiar los gadgets que utiliza la plantilla?


En el menú de la izquierda dentro de Blogger, selecciona la opción "diseño":




  • Al hacer "clic" en Añadir Gadget podrás seleccionar el gadget que desees incorporar a la vista de diseño. Ese gadget saldrá donde lo coloques en la plantilla.
  • Podrás seleccionar gadgets propios de Blogger o externos a Blogger:


  • Los primeros "gadgets" que te aparecerán en la lista son propios de Blogger. Los demás son añadidos a Blogger que provienen de partners o asociados que van dejando ahí sus creaciones.
  • Evidentemente Internet está plagada de páginas con gadgets para añadir a tus plantillas.

Creatividad al poder, realizar cambios en la plantilla o utilizar una plantilla creada fuera de Blogger


Normalmente el Blogger no se conforma con los estereotipos que por defecto ofrece la herramienta. Siempre busca nuevos "gadgets" y nuevas formas de ofrecer nuevas presentaciones.

Para acometer un cambio de presentación grande, se suele realizar partiendo de una plantilla de Blogger y personalizándola al máximo o, lo más sencillo, partir de una plantilla diseñada externamente a Blogger.

Si seleccionas una plantilla externa a Blogger, ponerla es sencillo también pero antes es recomendable que hagas una copia de seguridad de la plantilla que estés utilizando, de esa manera podrás volver atrás sin problemas si el cambio no te gusta.

Cambiar de plantilla no es "cambiarse de camisa", hay veces que puede quedarse algún gadget de la zona de diseño mal colocado o desconfigurado. Si te ocurre cualquiera de esas situaciones, simplemente entra en la vista de diseño y lo vuelves a colocar a tu gusto.

Normalmente suele ser menos problemático un cambio de plantilla cuando se "limpian" los gadgets que se utilizaban en la antigua. Al incorporarse la nueva plantilla, los gadgets antiguos pueden quedar "movidos" o "desaparecer" por no estar contemplados en  el diseño del autor de la nueva plantilla. Si te sucede algo así, simplemente mueve o elimina los gadgets sobrantes en la vista de diseño. Con la copia de seguridad podrás volver al estado anterior si no te convencen los resultados.

Antes de explicarte cómo ponerte una plantilla externa, lee atentamente estas recomendaciones:


  • No utilices cualquier plantilla de cualquier sitio. La plantilla puede contener "código malicioso" o "no eficiente", por tanto, investiga bien que la elección que has hecho es adecuada: búscala por internet por si otros usuarios han experimentado problemas, por si se afirma que pueda contener "malware", etc...
  • Busca sitios de confianza para hacer tus descargar. La comunidad +Plantillas Blogger Blogspot  o plantillas de otros Blogger de fiar que publican en comunidades de Google+.
  • Si tienes un perfil más técnico trata de estudiar el código para ver si está bien conformado y qué tecnologías está utilizando para mostrarse.
  • Mide la velocidad que puede tener tu Blog con la nueva plantilla con Google Pagespeed insights. Comprueba  que el rendimiento con el cambio no se vea excesivamente impactado.
  • Existen plantillas "premium" que son de pago, no suelen pasar de 20€ las más caras, suelen estar más depuradas pero conviene igualmente tomar las debidas precauciones.
  • Con los gadgets toma igualmente precauciones. No te pongas el primer "gadget bonito" que veas. Comprueba con AVAST u otros antivirus si el gadget o la plantilla en cuestión pudiera estar utilizando algún tipo de "software malicioso" que fastidiara la experiencia.
  • No te fijes exclusivamente en que sea "bonita", debe ser práctica, eficiente y "usable". Verifica que es realmente fácil de usar. Recuerda que las animaciones automáticas de muchas plantillas suelen "agobiar" al usuario, modera la utilización de efectos para crear un entorno amigable que centre la atención en lo más importante: tus textos.

Para cambiar la plantilla por otra que te guste y hayas verificado:


1) Descárgate el archivo .xml de la plantilla. Normalmente suelen venir comprimidas dentro de un .zip donde el único archivo importante es el .xml.

2) Dentro de Blogger dirígete en su menú de la izquierda a "plantilla" y, dentro de la página que sale (la que te muestro en la parte inferior del texto), en la parte superior derecha pulsa el botón "Crear/Restablecer copia de seguridad".


3) Acto seguido te aparecerá una caja en la que pone "Plantilla > Crear/Restablecer copia de seguridad". Como vas a cambiar la plantilla, selecciona "Seleccionar archivo" y busca el .xml de la nueva plantilla en tu disco duro para que Blogger la suba a tu Blog.


Después de la carga de la nueva plantilla podrás ver en "El Blog ahora" que ha quedado una pequeña visualización con los cambios de la nueva plantilla.

Recuerda, es buen momento para comprobar con AVAST si hay algún "malware" en la nueva plantilla, verificar el rendimiento que proporciona con Google Pagespeed Insights y sobre todo ver si se adecua a tus necesidades.

Otras lecturas de interés en caso de que cambies de plantilla:



Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

33comentarios:

  1. Miguel, una duda.

    Mi blog está hecho con una plantilla de blogger (http://polvodelibros.blogspot.com.es/ ). Puedo cambiarla directamente por otra plantilla blogger sin que todo se me estropee??? Me gustaría ponerle otra columna para gadgets a la izquierda porque sólo con la de la derecha no tengo suficiente para que me sea cómo acceder a la información del blog. Me da miedo estropear el blog al seleccionar otra plantilla.

    Me puedes ayudar.
    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Ángela,
      al cambiar la plantilla se te pueden desordenar los "gadgets" que ya tienes instalados pero no se te tiene que estropear nada. Siempre haz copia de seguridad para recuperar lo que tenías por si no te gusta cómo quede (del blog y de la plantilla).

      Si quieres escríbeme a "Contacto" y te explico.

      Un saludo!!!

      Eliminar
  2. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Juan Carlos, he tenido un problema con el sistema de comentarios, si puedes por favor, vuelve a escribirme y te contesto.

      Un saludo!

      Eliminar
  3. Creo que te decía algo parecido a esto:

    Quiero colocar en mi blog un gadget (o widget, no sé) de las entradas más o menos recientes que se muestren con imagen de manera rotativa y automática. Como sé que no es muy clara la descripción de mi deseo, te remitía al blog http://laslecturasdemrdavidmore.blogspot.com.es/ en cuya página inicial verás su funcionamiento.

    Muchas gracias por atenderme, Miguel

    ResponderEliminar
    Respuestas
    1. Hola Juan Carlos,
      ese gadget que tiene es un slider hecho con jquery que tira del feed del Blog para sacar los artículos populares. Lo malo que no sé dónde está disponible, se puede extraer el código para copiarlo pero creo en este caso conveniente que te pongas en contacto con los propietarios del Blog para pedírselo. En realidad cualquier "slider" puede valer, el problema es que necesitas el código javascript que te hace la llamada al feed para ver cuáles son tus entradas populares.

      Un saludo y muchas gracias a ti, siento no poderte dar el código pero es que no es mío.

      Eliminar
  4. Hola Miguel, gracias por todas tus explicaciones para los que no entendemos mucho de este mundillo, son siempre muy interesantes. Tengo una pregunta, hace tiempo me había hecho una plantilla personalizada un diseñador gráfico, ahora quisiera cambiarla por una plantilla simple para blogger con unas modificaciones hechas por mi. Mi duda es, ¿Cómo hago para subir esa nueva plantilla encima de lo que me han hecho antes? Yo voy haciendo el borrador en un blog de pruebas pero no sé muy bien después cuando ya tenga todo estructurado como pasarla al blog definitivo. No sé si me he explicado bien. Muchas gracias!! saludos, Esther

    ResponderEliminar
    Respuestas
    1. Tienes diversas opciones. Quizás lo más cómodo es finalizar la del Blog de pruebas y cuando la tengas le das a "descargar plantilla" desde la opción de menú plantilla en Blogger. Así sacas la plantilla del de pruebas y se la pones al bueno. Pero ojo, en ese momento tendrás que reordenar gadgets y no quedará como en el de prueba. Yo hay veces que tengo que borrar todo lo del antiguo y machacar con lo nuevo. Es con mucha paciencia ir haciendo pruebas.

      Un saludo!!!

      Eliminar
    2. Gracias por tu respuesta, probaré a hacerlo como dices, pero tengo otra duda, para poner la plantilla del borrador simplemente la cargo en el blog"bueno" como si estuviera restaurando una copia de seguridad? Siento ser tan pesada, pero es muy importante para mí no perder el trabajo que tengo hasta ahora y al no estar segura todo son dudas ;)
      Muchísimas gracias !! Saludos, Esther

      Eliminar
    3. No te preocupes, no eres pesada, aquí estoy para eso, para ayudarte.

      Sí, el cambio de plantilla cono verás en la guía, es como cuando pones una copia de seguridad de la plantilla.

      Haz copia de seguridad antes y recuerda que tendrás que realizar varios ajustes, así pues con paciencia y tiempo.

      Un saludo!!

      Eliminar
  5. Menos mal que te encontré! Es dificilísimo dar con alguien que explique las cosas de una forma tan clara.
    Gran post.
    Un beso :)

    ResponderEliminar
    Respuestas
    1. Muchísimas gracias, para mi es un honor algo así. Me alegro que te sirva, me da muchos ánimos. Un abrazo y un beso para ti también.

      Eliminar
  6. Hola Miguel,

    En primer lugar darte la enhorabuena por este trabajo.

    Me gustaría hacerte un consulta.

    Tengo un Blog desde hace un año http://bitartedoi.blogspot.com.es/ al cuál le he hecho varios cambios, como un menú desplegable o contraseña de acceso para alguna de sus entradas a las que solo tienen acceso mis alumnos. El caso es que últimamente tengo problemas para realizar cambios en la plantilla ya que cuando intento cambiar el color del título o del fondo o cualquier cambio que quiera hacer en la plantilla aunque al darle a guardar cambios me aparece un mensaje que me dice que los cambios se han guardado, la verdad es que en el Blog no cambia nada.

    No sé si tú me podrías ayudar.

    Muchas gracias de ante mano y un saludo.

    LUIS MARI

    ResponderEliminar
    Respuestas
    1. Hola Luis Mari,
      a mí me ha sucedido en algún Blog una situación similar. La solución más "drástica" es previa copia de seguridad darle a "restablecer plantilla de artilugios a valores originales" pero eso te va a desajustar y desordenar las cosas.

      Lo mejor es que limpies la caché del navegador, si usas Chrome luego dale a la opción "Configuración" y después a "Mostrar opciones avanzadas" (aparece abajo en pequeño y con texto azul) y ahí dale al último botón que pone "Restablecer la configuración del navegador" y vuelve a probar.

      Hay veces que tocamos estilos y son "sobreescritos" por otros, asegúrate de que no haya otro estilo antes que no te deje ver el cambio de color que hayas empleado. Te lo digo porque aunque parece que no graba, si deja hechos luego los cambios.

      Asegúrate de esas cuestiones y si no te funciona me vuelves a escribir y buscamos la manera de solucionarlo.

      Un saludo!!!

      Eliminar
    2. Hola Miguel,
      muchas gracias por tu respuesta.

      He limpiado la caché del navegador y sigue el problema.

      En cuanto a el tema de los estilos, no lo controlo mucho. Supongo que tengo que entrar en el HTML, pero no sé muy bien que es lo que tengo que ver para saber si hay alguno que está "sobreescrito", como dices.

      He copiado un cacho del HTML donde aparece algo de colores, no sé si me podrías decir que es exactamente lo que tengo que buscar viendo esto.

















      Muchísimas gracias por tu atención.

      Un saludo,

      LUIS MARI

      Eliminar
    3. Hola otra vez,
      que veo que no aparece lo que te he enviado del HTML. Te escribo alguna línea

      Variable name="keycolor" description="Main Color" type="color" default="#1a222a"
      value="#2a1a22"/
      Variable name="body.background" description="Body Background" type="background"
      color="#6a99aa" default="#111111 url(//themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="$(color) url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMDZjM2Q4YjctMTY2OC00ZGU2LWJjZDYtODVjOGRiOThlMGQ3) repeat-x fixed top center /* Credit: Jason Morrow (http://jasonmorrow.etsy.com) */"/
      Group description="Page Text" selector="body"
      Variable name="body.font" description="Font" type="font"

      Muchas gracias

      Eliminar
    4. Veamos,
      el css personalzado se mete en Blogger así: http://www.diariosdelanube.com/2013/07/guia-para-trabajar-con-hojas-de-estilo.html sigue los pasos para poner tu css a partir del paso 5 y me dices lo que te sale.

      Un saludo, paciencia que lo sacamos.

      Eliminar
    5. Hola Miguel Angel,
      Paciencia la tuya un millón de gracias. He llegado hasta el paso 7, donde se abre la caja de texto grande blanca y no me aparece vacia, aparece lo siguiente:

      .status-msg-wrap {visibility:hidden;display:none;}.feed-links {
      visibility:hidden;
      display:none;
      }

      Un saludo.

      Eliminar
    6. Buenos días Miguel,
      SOLUCIONADOOO! Con un poco más de trabajo me he atrevido a cambiar la plantilla y modificar lo que tenía cambiado y se ha solucionado.
      A partir de hoy haré las cosas como las tenía que haber hecho desde el principio y antes de tocar nada en el HTML haré copia de seguridad. No hay nada como cagarla para aprender.
      Muchísimas gracias por tu interés y ayuda.
      Un saludo,
      LUIS MARI

      Eliminar
    7. Gracias a ti Luis Mari y me alegro mucho de que hayas resuelto el problema. Para cualquier cosa por aquí estoy. La solución de poder ver el código fuente y modificarlo con F12 es una ayuda genial. Un placer y muchas gracias a ti por participar.

      Eliminar
  7. Hola Miguel,

    antes de nada, felicitarte por el artículo. Soy un iniciado en Blogger y estoy interesado en hacer mi CV utilizando una plantilla externa. Estoy buscando una que este orientada a la informática (mi profesión es analista/programador). Podrías recomendarme alguna?

    Muchas gracias,

    ResponderEliminar
    Respuestas
    1. Hola Dani, para un CV lo ideal es la vCard, las tarjetas de presentación virtual. Te recomiendo este artículo: http://www.diariosdelanube.com/2014/04/como-utilizar-tu-blog-como-curriculum.html

      Ahí te viene la que yo considero mejor plantilla para estos temas, pero existen muchas, es una nueva forma de promocionarse que puede resultar interesante.

      Muchas gracias a ti y cualquier duda me comentas lo que necesites.

      Un saludo.

      Eliminar
  8. Hola Miguel,

    gracias por la información. Precisamente empecé con la guía que comentas e, incluso, apliqué la que recomiendas. La verdad es que no me gustó el resultado final y, por ese motivo, estoy mirando mas para comparar y decidirme finalmente. Te indico el siguiente enlace, por si es de interés:

    http://smashfreakz.com/2013/06/free-vcard-templates/

    Solo comentarte que los artículos que escribes son muy útiles y me gustaría mencionar este artículo en Linkedin (haciendo referencia tu nombre).

    Ya me comentarás.

    Un saludo,

    ResponderEliminar
    Respuestas
    1. Hola Dani,
      claro, puedes compartir el artículo sin problema. Esas vCard son más profesionales, en eso tienes razón. La vCard del ejemplo requiere mucho trabajo en la fotografía del perfil y en los colores que se utilizan. Quizás es más sencillo encajar la información en esas otras plantillas. Están muy bien.

      Cualquier cosa del Blog que necesites por aquí estoy.

      Un saludo!

      Eliminar
  9. Hola, yo quería hacer una pregunta, sabes por qué las entradas (los post) de blogger me eliminan las etiquetas HTML p, las pongo me las guarda, las mantiene y cuando le apetece me las quita y lo deja todo con br /, yo no lo entiendo, eso es un descontrol, puedes ayudar?, por cierto están dentro de divs.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola,
      las etiquetas para que se vean debajo del post se marca en la vista de diseño de Blogger y después donde está el "gadget" principal ("Entradas del Blog") activas la casilla de que quieres que se vean las etiquetas. Luego, dentro de los post, debes etiquetar la entrada para que pueda aparecer.

      Dicho esto, si por si puedo ver algo, pásame la URL de tu web y miro a ver qué podría ser. Pero si has hecho todo lo que indiqué, podría ser simplemente que falte espacio para meterlas en ciertas ocasiones (dependiendo de lo que se muestre en pantalla).

      Un saludo!!!

      Eliminar
  10. Buenos consejos. La verdad es que yo estoy muy contento con Blogger. Ofrece mucha versatilidad.

    ResponderEliminar
  11. Como puedo transformar mi blog en uno profesional.

    ResponderEliminar
    Respuestas
    1. Hola juan,
      hay diversas maneras pero sobre todo quizás lo importante primero es descubrir en qué temática te centrarás temáticamente. Con esto claro dar de alta el mismo en las herramientas de webmaster de Google: http://www.diariosdelanube.com/2013/09/aprende-utilizar-las-herramientas-para.html y hacer unos pequeños pasos de SEO: http://www.diariosdelanube.com/2013/09/aprende-practicar-seo-y-mejorar-el.html

      Una vez bien sentadas las bases, darle una presentación profesional quizás pase por la búsqueda de una buena plantilla responsive: http://www.diariosdelanube.com/2014/02/que-es-responsive-design.html

      Dame unos días y la semana que viene intento publicar un "he creado un Blog y ahora qué hago" para intentar dar un poco más de luz en este tema.

      Un saludo y muchas gracias por participar!!!

      Eliminar
  12. Mi duda es la siguiente: Tengo mi blog y quiero poner una descripción en el apartado ''Sobre mi'' pero no soy capaz, no sé como hace, me lo podrías explicar?

    Gracias y un saludo!

    ResponderEliminar
    Respuestas
    1. Tienes diversas opciones, si añades un "sobre mí" puedes crearte una opción de menú que abra una página y ahí escribes todo sobre tí. Para crearte el menú sigue este tutorial: http://www.diariosdelanube.com/2014/05/como-poner-un-menu-en-blogger-sin-tener.html y para crearte la página sigue este otro tutorial: http://www.diariosdelanube.com/2014/12/como-crear-una-pagina-en-blogger-sin.html

      Por último, si lo que quieres es sacar una "especie de firma" al final de cada entrada, sigue este otro tutorial: http://www.diariosdelanube.com/2014/02/anade-un-cuadro-de-autor-al-final-de.html

      Cualquier cosa aquí estoy si necesitas ayuda. Gracias por participar.

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.