Blogger-Cheat-Sheet

Muchos de los que empezamos un blog lo hacemos en Blogger, la interfaz es sencilla y sacar un blog solo requiere de unos pasos, los problemas empiezan a llegar cuando queremos manipular el diseño del blog, el CSS y XML de las plantillas a primer golpe parecen muy complejos, sin embargo, no lo son tanto después de pelearse un poco y ver el esquema general.

Y precisamente para ayudar a entender el esquema general de las plantillas blogger hemos creado una Chuleta o Cheat Sheet para Blogger, más específicamente sobre las clases e identificadores que usan la gran mayoría de las plantillas.

Descarga

Blogger Cheat Sheet (PDF) / Ver en linea
Imagen png – 1 , 2

¿Para qué sirve?

Esencialmente para:

  • Modificar elementos de una plantilla existente.
  • Adaptar un diseño de otra plataforma.
  • Crear un diseño nuevo para Blogger.

¿Cómo usarla?

Usarla requiere al menos de conocimientos básicos de CSS y de acuerdo a ellos se podrán modificar más o menos cosas.

Modificar elementos

Basta buscar la clase o id en la chuleta que corresponda a la parte que deseamos modificar y cambiarle los atributos en el CSS de la plantilla.

Ejemplo: Modificar el color del título de blog.

Buscando en la chuleta, la clase correspondiente al título del blog es h1.title, se busca la clase en el código CSS de la plantilla, si existe se modifica el código de color y sino, se agrega la nueva clase:

h1.title {
color:#000;
/* otros atributos */
}

Adaptar un diseño de otra plataforma

La chuleta aquí sirve para encontrar el equivalente en blogger de cada elemento.

Ejemplo: En un theme WordPress el título tiene de los post tiene un clase llamada .tit, se copia la clase y los atributos y se renombra en blogger como: .post-title

Este es un ejemplo básico, obviamente adaptar una plantilla demanda conocer un poco más el CSS, pues no siempre hay equivalentes y hay que modificar también la estructura.

Crear un nuevo diseño

A partir de la chuleta se puede crear un estructura CSS y HTML que sirva para diseñar sin estar desde Blogger, o bien, solo la estructura CSS y trabajar en linea.

Ayuda y correcciones

La chuleta es básica y precisamente por ello creo que puede ser muy útil para mucha gente, si crees lo mismo, agradecemos si nos ayudas a difundirla, en tu blog, bitacoras.com o meneame. Y si tienes correcciones o una opinión te agradecemos el comentario.

Escrito por Francisco

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

Comentarios

  1. Carmen / Agosto 5, 2009 /

    ¡Gran trabajo!

    Tengo una duda, en la zona del header siempre me aparece margin y padding. Ejemplo:

    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 0px

    ¿Qué significa y para qué sirve padding?

    Muchas gracias.

  2. Angel / Agosto 5, 2009 /

    Carmen

    Padding es el relleno

    padding: 0px 10px 0px 0px

    van asi el primer 0px corresponde a top, 10px a right, 0px a bottom y 0px a left

    Ejemplo de PADDING:
    __________________________________________

    padding de 3px en un bloque
    __________________________________________
    este es el margin

  3. Francisco / Agosto 5, 2009 /

    Angel, muy buena explicación :)

  4. vku / Agosto 5, 2009 /

    muy bueno realmente te felicito

  5. Moniri / Agosto 6, 2009 /

    hi, is there a english cheat sheet for blogger? en link is not correct, I guess :)

  6. Kevin Maschke / Agosto 6, 2009 /

    Hola! Genial el PDF.

    Solo una pregunta, no sabrás donde conseguir un Cheat Sheet para Wordpress, no?

  7. SpamLoco / Agosto 6, 2009 /

    Muy buena para tener a mano :)

  8. Francisco / Agosto 6, 2009 /

    @Moniri An english version soon ;)

  9. Francisco / Agosto 6, 2009 /

    @Kevin, de WordPress por suerte hay muchas. ;)

  10. Francisco / Agosto 6, 2009 /

    @Spamloco Gracias Ale, me haces recordar poner que es imprimible en tamaño carta :P

  11. Francisco / Agosto 6, 2009 /

    @vku gracias, ojalá te sirva.

  12. mamá currante / Agosto 7, 2009 /

    Muchas gracias seguro que nos ayudará a los novatos, he llegado aquí a través de El escaparate de rosa, os apunto como libros de cabecera.
    Saludos

  13. Ascesino96 / Agosto 7, 2009 /

    Guau, vengo del escaparate y me interesa muchito eso. Si quieres podemos intercambiar links, como a ti te guste.
    Mi mail y mi blog ya los aclare en mi comentario.

  14. Alexander / Agosto 10, 2009 /

    Esta muy interesante la informacion Francisco seria bueno empezar a practicar de como diseñar las plantillas para blogger.

    De hecho por ai en el foro en el area de blogger deje una consulta espero que talvez tu puedas ayudarme http://forosdelblog.com/showthread.php?t=1427

    Saludos cordiales.

  15. Gem@ / Agosto 10, 2009 /

    En este ordenador no puedo descargarla pero lo hice en el otro cuando me la mostraste y es un gran trabajo. Viene de perlas :D

  16. Francisco / Agosto 10, 2009 /

    @mamá currante, Gracias! :) Y el framework de zonacerebral que apunto Rosa también es muy bueno.

  17. Francisco / Agosto 10, 2009 /

    @Ascesino96 Gracias por no hacemos intercambios.

  18. Francisco / Agosto 10, 2009 /

    @Alexander, adaptar una plantilla es principalmente conocer CSS, y precisamente esta chuleta es para ayudarte con el CSS de la parte de Blogger.

  19. Francisco / Agosto 10, 2009 /

    @Gema, Muchas gracias :D Que bueno te ha gustado y espero pronto tener otra más “avanzada”.

  20. José GDF / Agosto 11, 2009 /

    El día que me haga una plantilla a medida os cuento. Me vendrá muy bien la chuletilla.

    Mientras, me suscribo a los comentarios de esta entrada para no perderos la vista.

    ¡Ah! Y gracias ;)

  21. Francisco / Agosto 11, 2009 /

    @José GDF, gracias y no el olvides el framework de zonacerebral que es totalmente compatible con esta chuleta.

  22. Juanma™ / Agosto 12, 2009 /

    Hola, muy útil la entrada. He publicado una entrada en mi blog sobre la chuleta para blogger, te dejo el enlace por si quieres verlo: http://juanmatm.blogspot.com/2009/08/cheat-sheep-o-chuleta-para-blogger.html
    Un Saludo.
    Juanma™

  23. Segis / Agosto 16, 2009 /

    ¡Extraordinario, este post!
    ¡Gracias por tan maravillo aporte!

  24. Joanirse / Agosto 16, 2009 /

    Olá Francisco!!!
    Parabéns pelo material! Excelente!
    Coloquei em meu blog dando os devidos créditos a você e com link direcionando para sua postagem!
    Espero que não se importe em compartilharmos com mais pessoas!!!
    Abraços,
    Joanirse

  25. Francisco / Agosto 18, 2009 /

    @Juanma Gracias por la difusión :)

  26. Francisco / Agosto 18, 2009 /

    @Joanirse Al contrario, muchas gracias por la difusión :)

  27. raul / Agosto 22, 2009 /

    buenas la verdad muy bueno el post, pero necesito algo de ayuda xq estoy al horno!!!…quiero personalizar mi blog y no se como hacerlo, he visto q muchos blogs tienen menu desplegables y demas cosas y me gustaria saber como hacerlo…cambiar el titulo por una imagen, el fondo y demas…podrian darme una mano….soy muy novato en esto…

  28. Francisco / Agosto 23, 2009 /

    @raul si quieres manejar bien tu plantilla te recomiendo primero estudies un poco de CSS, checa el tutorial de librosweb.es , con lo básico y esta chuleta podrás cambiar casi cualquier cosa.

  29. ivizioadicto / Septiembre 16, 2009 /

    hola amigo, gracias, esta bueno, vengo de vidablogger

  30. Pablo / Septiembre 22, 2009 /

    Alguien sabe la estructura tipica de un comentario en un BLOGG ?) :(

  31. smilax / Octubre 26, 2009 /

    increible!!!

    pedazo de invento!! me ha costado dar con vosotros pero ya os he fichado!; la chuleta me ha ayuado muchisimo,porque en mi caso, queria separar el header de la barra lateraly los comentarios, que quedaban muy juntos y no me gustaba:

    y lo he hecho, ya que he entendido dónde tenia que darle ancho: 10px a 100px, gracias a la chuleta!!

    en header!!!

    muchas gracias!!

  32. Manuel de la Fuente / Noviembre 7, 2009 /

    Se agradece la ayuda, ya lo he subido a Google Docs para tenerlo siempre a la mano. :)

Responder

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios no estén fuera tema, no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán eliminados. Recuerda que puedes usar nuestro foro para otros temas y preguntas.

Blog and Web es un blog de Blógstica

Términos de uso - Política de privacidad