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.
¡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
Angel, muy buena explicación
muy bueno realmente te felicito
hi, is there a english cheat sheet for blogger? en link is not correct, I guess
Hola! Genial el PDF.
Solo una pregunta, no sabrás donde conseguir un Cheat Sheet para WordPress, no?
Muy buena para tener a mano
@Moniri An english version soon
@Kevin, de WordPress por suerte hay muchas.
@Spamloco Gracias Ale, me haces recordar poner que es imprimible en tamaño carta
@vku gracias, ojalá te sirva.
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.
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.
En este ordenador no puedo descargarla pero lo hice en el otro cuando me la mostraste y es un gran trabajo. Viene de perlas
@mamá currante, Gracias! Y el framework de zonacerebral que apunto Rosa también es muy bueno.
@Ascesino96 Gracias por no hacemos intercambios.
@Alexander, adaptar una plantilla es principalmente conocer CSS, y precisamente esta chuleta es para ayudarte con el CSS de la parte de Blogger.
@Gema, Muchas gracias Que bueno te ha gustado y espero pronto tener otra más “avanzada”.
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.
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™
¡Extraordinario, este post!
¡Gracias por tan maravillo aporte!
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
@Juanma Gracias por la difusión
@Joanirse Al contrario, muchas gracias por la difusión
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.
hola amigo, gracias, esta bueno, vengo de vidablogger
Alguien sabe la estructura tipica de un comentario en un BLOGG ?)
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!!
Se agradece la ayuda, ya lo he subido a Google Docs para tenerlo siempre a la mano.
muchas garcias por el aporte, se aprecian cosas asi, saludos.
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.
Muchas gracias, muy útil ^^!
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