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.
Carmen agosto 5, 2009 a las 2:27 pm
¡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.
ResponderAngel agosto 5, 2009 a las 4:47 pm
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
Responder__________________________________________
este es el margin
Francisco agosto 5, 2009 a las 5:50 pm
Angel, muy buena explicación 🙂
Respondervku agosto 5, 2009 a las 6:40 pm
muy bueno realmente te felicito
ResponderMoniri agosto 6, 2009 a las 1:40 am
hi, is there a english cheat sheet for blogger? en link is not correct, I guess 🙂
ResponderFrancisco agosto 6, 2009 a las 3:00 pm
@Moniri An english version soon 😉
ResponderKevin Maschke agosto 6, 2009 a las 7:28 am
Hola! Genial el PDF.
Solo una pregunta, no sabrás donde conseguir un Cheat Sheet para WordPress, no?
ResponderFrancisco agosto 6, 2009 a las 3:02 pm
@Kevin, de WordPress por suerte hay muchas. 😉
ResponderSpamLoco agosto 6, 2009 a las 12:36 pm
Muy buena para tener a mano 🙂
ResponderFrancisco agosto 6, 2009 a las 3:04 pm
@Spamloco Gracias Ale, me haces recordar poner que es imprimible en tamaño carta 😛
ResponderFrancisco agosto 6, 2009 a las 3:11 pm
@vku gracias, ojalá te sirva.
Respondermamá currante agosto 7, 2009 a las 8:29 am
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.
ResponderSaludos
Francisco agosto 10, 2009 a las 10:04 pm
@mamá currante, Gracias! 🙂 Y el framework de zonacerebral que apunto Rosa también es muy bueno.
ResponderAscesino96 agosto 7, 2009 a las 10:28 am
Guau, vengo del escaparate y me interesa muchito eso. Si quieres podemos intercambiar links, como a ti te guste.
ResponderMi mail y mi blog ya los aclare en mi comentario.
Francisco agosto 10, 2009 a las 10:05 pm
@Ascesino96 Gracias por no hacemos intercambios.
ResponderAlexander agosto 10, 2009 a las 4:10 pm
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.
ResponderFrancisco agosto 10, 2009 a las 10:07 pm
@Alexander, adaptar una plantilla es principalmente conocer CSS, y precisamente esta chuleta es para ayudarte con el CSS de la parte de Blogger.
ResponderGem@ agosto 10, 2009 a las 4:27 pm
En este ordenador no puedo descargarla pero lo hice en el otro cuando me la mostraste y es un gran trabajo. Viene de perlas 😀
ResponderFrancisco agosto 10, 2009 a las 10:08 pm
@Gema, Muchas gracias 😀 Que bueno te ha gustado y espero pronto tener otra más “avanzada”.
ResponderJosé GDF agosto 11, 2009 a las 7:43 am
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 😉
ResponderFrancisco agosto 11, 2009 a las 9:50 pm
@José GDF, gracias y no el olvides el framework de zonacerebral que es totalmente compatible con esta chuleta.
ResponderJuanma™ agosto 12, 2009 a las 6:16 am
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
ResponderUn Saludo.
Juanma™
Francisco agosto 18, 2009 a las 11:27 am
@Juanma Gracias por la difusión 🙂
ResponderSegis agosto 16, 2009 a las 5:00 am
¡Extraordinario, este post!
Responder¡Gracias por tan maravillo aporte!
Joanirse agosto 16, 2009 a las 3:58 pm
Olá Francisco!!!
ResponderParabé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
Francisco agosto 18, 2009 a las 11:28 am
@Joanirse Al contrario, muchas gracias por la difusión 🙂
Responderraul agosto 22, 2009 a las 7:05 pm
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…
ResponderFrancisco agosto 23, 2009 a las 12:15 pm
@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.
Responderivizioadicto septiembre 16, 2009 a las 10:30 pm
hola amigo, gracias, esta bueno, vengo de vidablogger
ResponderPablo septiembre 22, 2009 a las 12:38 pm
Alguien sabe la estructura tipica de un comentario en un BLOGG ?) 🙁
Respondersmilax octubre 26, 2009 a las 2:22 pm
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!!
ResponderManuel de la Fuente noviembre 7, 2009 a las 6:34 pm
Se agradece la ayuda, ya lo he subido a Google Docs para tenerlo siempre a la mano. 🙂
ResponderFelipe Tapia Salas mayo 2, 2010 a las 1:37 pm
muchas garcias por el aporte, se aprecian cosas asi, saludos.
ResponderDarwin mayo 22, 2010 a las 11:22 am
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.
Responderswindler junio 8, 2010 a las 8:12 am
Muchas gracias, muy útil ^^!
ResponderZoomdeco julio 23, 2010 a las 12:28 am
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!
Respondersaludos,
ZOOMDECO
Nataly octubre 1, 2010 a las 8:54 pm
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