Blogger Diseño

Chuleta o Cheat Sheet de Blogger

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.

Deja un comentario

49 Comentarios

  • […] ver y descargar e imprimir la chuleta de Blogger desde Blog and Web. Indudablemente, puedes acompañarla con cheat sheets de CSS para comprender el […]

  • […] de Blog and Web me avisa de que ha estado trabajando en una chuleta para hacer más fácil el trabajo de manipular el CSS de Blogger[Descargar PDF] ← Google […]

  • […] de Blog and Web me avisa de que ha estado trabajando en una chuleta para hacer más fácil el trabajo de manipular el CSS de Blogger[Descargar […]

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

  • 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

  • Hola! Genial el PDF.

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

  • […] Anieto2k descubro un guía de las clases y los identificadores de Blogger escrita por Francisco (de Blog and Web), que sirve de gran ayuda si quieres diseñar una plantilla para […]

  • […] En Blog and Web han realizado un cheatsheet sobre la creación de plantillas para blogger. Se encuentra en formato pdf y png (1,2). Muy útil a la hora de crear las plantillas. Compartir: […]

  • 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

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

  • […] la entrada de Blog and Web donde Francisco nos presenta la “chuleta” tenéis todas indicaciones pertinentes para […]

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

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

  • […] plataforma. También puedes usarla para adaptar un theme de WordPress, os recomiendo visitar la web de descarga, donde tenéis un pequeño manual de […]

  • 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 😉

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

  • […] Blog and Web publicaron el cheat sheet para diseñar con blogger(Chuleta o Cheat Sheet de Blogger), gracias a ellos me anime a publicar el siguiente […]

  • 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

  • […] la chuleta para Blogger tuve la necesidad de unir o combinar dos archivos PDF, obviamente era demasiado bajar un software […]

  • 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…

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

  • […] En Blog and Web han publicado una chuleta (cheat sheet) muy interesante para aquellos que utilicen Blogger como plataforma de publicación. […]

  • […] ver, descargar e imprimir la chuleta de Blogger desde Blog and WebVía: Chica BloggerTambién te podría interesar:20 Abril 2009 — RDesc: Gestor de descargas de […]

  • […] primer chuleta creada por BlogandWeb esta en español y resulta de mucha utilidad para quienes desean modificar su actual plantilla o […]

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

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

  • 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

  • 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 🙁