English Português

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 Oliveros

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 / Hace 5 años /

    ¡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.

    Responder a Carmen →
  2. Angel / Hace 5 años /

    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

    Responder a Angel →
  3. Francisco / Hace 5 años /

    Angel, muy buena explicación :)

    Responder a Francisco →
  4. vku / Hace 5 años /

    muy bueno realmente te felicito

    Responder a vku →
  5. Moniri / Hace 5 años /

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

    Responder a Moniri →
  6. Kevin Maschke / Hace 5 años /

    Hola! Genial el PDF.

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

    Responder a Kevin Maschke →
  7. SpamLoco / Hace 5 años /

    Muy buena para tener a mano :)

    Responder a SpamLoco →
  8. Francisco / Hace 5 años /

    @Moniri An english version soon ;)

    Responder a Francisco →
  9. Francisco / Hace 5 años /

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

    Responder a Francisco →
  10. Francisco / Hace 5 años /

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

    Responder a Francisco →
  11. Francisco / Hace 5 años /

    @vku gracias, ojalá te sirva.

    Responder a Francisco →
  12. mamá currante / Hace 5 años /

    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

    Responder a mamá currante →
  13. Ascesino96 / Hace 5 años /

    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.

    Responder a Ascesino96 →
  14. Alexander / Hace 5 años /

    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.

    Responder a Alexander →
  15. Gem@ / Hace 5 años /

    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

    Responder a Gem@ →
  16. Francisco / Hace 5 años /

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

    Responder a Francisco →
  17. Francisco / Hace 5 años /

    @Ascesino96 Gracias por no hacemos intercambios.

    Responder a Francisco →
  18. Francisco / Hace 5 años /

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

    Responder a Francisco →
  19. Francisco / Hace 5 años /

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

    Responder a Francisco →
  20. José GDF / Hace 5 años /

    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 ;)

    Responder a José GDF →
  21. Francisco / Hace 5 años /

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

    Responder a Francisco →
  22. Juanma™ / Hace 5 años /

    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™

    Responder a Juanma™ →
  23. Segis / Hace 5 años /

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

    Responder a Segis →
  24. Joanirse / Hace 5 años /

    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

    Responder a Joanirse →
  25. Francisco / Hace 5 años /

    @Juanma Gracias por la difusión :)

    Responder a Francisco →
  26. Francisco / Hace 5 años /

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

    Responder a Francisco →
  27. raul / Hace 5 años /

    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…

    Responder a raul →
  28. Francisco / Hace 5 años /

    @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.

    Responder a Francisco →
  29. ivizioadicto / Hace 5 años /

    hola amigo, gracias, esta bueno, vengo de vidablogger

    Responder a ivizioadicto →
  30. Pablo / Hace 5 años /

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

    Responder a Pablo →
  31. smilax / Hace 5 años /

    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!!

    Responder a smilax →
  32. Manuel de la Fuente / Hace 5 años /

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

    Responder a Manuel de la Fuente →
  33. Felipe Tapia Salas / Hace 5 años /

    muchas garcias por el aporte, se aprecian cosas asi, saludos.

    Responder a Felipe Tapia Salas →
  34. Darwin / Hace 5 años /

    Que tal Francisco, soy colega tuyo, ya que soy ingeniero mecánico tambien pero ahora ando en la onda de crear un blog para una universidad, sin fines de lucro y tampoco con el ánimo de volverme famoso jajajaja. Cree un blogger que está enlazado a mi cuenta en gmail pero como soy novato en esto, pero muy novato pues no se como agregar archivos que e subido en formato .doc y .xls a google docs de manera tal que no solo sean leidos sino descargados por los visitantes al blog. Si me puedes ayudar de verdad te lo agradeceria inmensamente amigo. Gracias amigo.

    Responder a Darwin →
  35. swindler / Hace 4 años /

    Muchas gracias, muy útil ^^!

    Responder a swindler →
  36. Zoomdeco / Hace 4 años /

    Estoy probando todos los tips, la verdad que hasta ahora me viene resultando de mucha utilidad para mejorar cada día mi blog, muchas gracias!
    saludos,
    ZOOMDECO

    Responder a Zoomdeco →
  37. Nataly / Hace 4 años /

    Donde puedo descargar la plantilla framework para Blogger de Zona Cerebral? He buscado la página de Zona Cerebral y no la encuentro por favor que alguien me diga dónde puedo descargarlo :(

    Responder a Nataly →

Responder

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

Términos de uso - Política de privacidad