Como crear una plantilla para Blogger – Primera parte: Composición y estructura.
Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!
Cuando empecé a adaptar el primer template para Blogger, ya tenía pensada la idea de hacer un tutorial para que los sufridos usuarios de esta plataforma olvidada puedan crear su propia plantilla para el blog, sin tener que esperar a que alguien adapte uno de los miles diseños disponibles para Wordpress. He decidido dividirlo en varias partes para que no se haga tan pesado de leer y para estructurarlo en distintos capítulos en función de los pasos que se suelen seguir al diseñar un theme de este tipo.
Antes de empezar, necesitarás tener unos conocimientos básicos sobre HTML y CSS principalmente (más CSS que HTML). También ayudará bastante tu experiencia como usuario de Blogger a la hora de modificar su código y hacerlo funcionar correctamente. De todas formas, al final de este post encontrarás algunos enlaces de manuales sobre CSS y HTML.
Introducción.
Todas las plantillas de Blogger se caracterizan por tener una composición específica, formada por un “header” o título principal, una o varias columnas laterales (sidebars), una sección donde se muestran las entradas del blog denominada “main” y por último, una parte inferior o “footer” en la que se suelen incluir los créditos y otros enlaces. Si le echas un vistazo a su código en edición HTML, puedes ver que toda una primera parte comprendida entre las etiquetas “head”, es la encargada de definir el estilo de estos elementos de forma individual y también en su conjunto mediante los códigos “body”, “outer-wrapper”, etc. La segunda parte de la plantilla, determinada por la etiqueta <body>, es la que establece el contenido de la página y define la estructura principal de la misma. Para que te hagas una idea, el código HTML sería el encargado de poner los ladrillos, levantar las paredes y construir el armazón de una casa, mientras que el código CSS se encarga de elegir los colores, pintar las paredes y personalizar su estilo.
Estructura.
En el caso particular de Blogger, el body de la plantilla va definiendo uno a uno todos estos elementos y su contenido por orden de aparición. Dentro de cada uno de ellos se encuentran las secciones, que son los apartados que puedes ver al agregar un widget en la pestaña “Elementos de página” haciendo click en “Añadir un elemento de página” y en cada sección se incluyen los distintos widgets que hayas creado. Este es un ejemplo de sidebar con un único widget:
<div id=’sidebar-wrapper’> (Inicio del sidebar)
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’ > (Inicio de la sección para añadir los widgets)
<b:widget id=’LinkList1’ locked=’false’ title=’Blogroll’ type=’LinkList’> (Definición y tipo de widget)
<b:includable id=’main’>
<b:if cond=’data:title’><h2><data:title/></h2></b:if> (Determina el título del widget)
<div class=’widget-content’> (Contenido. Varía en función del tipo de elemento)
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget> (Fin del widget)
</b:section> (Fin de la sección)
Personalización.
Como puedes ver, es más sencillo de lo que parece a primera vista, ya que tiene una estructura bastante lógica con un orden concreto. Seguramente, has modificado alguna vez el código CSS del sidebar, definido por una id, #sidebar-wrapper y una clase, .sidebar (segunda línea del código anterior) que suele estar casi al final del CSS. La diferencia entre una clase y una id es que la segunda es única, es decir, no puede haber más de un elemento con la misma id, mientras que la clase (class) puede aplicarse a más de un elemento y su estilo CSS se define mediante un punto en lugar de una almohadilla.
Por defecto, cada parte de la plantilla suele contener una única sección que alberga los distintos elementos de página que añades, pero puede que necesites crear una segunda sección, por ejemplo, dentro del sidebar para aplicarle un estilo diferente o incluir otra imagen de fondo. Para ello, sólamente tienes que copiar el código comprendido entre las etiquetas <b:section y cambiar la clase de la sección (sidebar en el ejemplo anterior) por la que desees. Al guardar la plantilla y entrar en elementos de página, verás que dentro del mismo sidebar hay dos apartados en los que aparece el texto “Añadir un elemento de página”.
El código “widget-content” define el contenido de cada widget o elemento de página que has agregado a través del panel de Blogger. Algunas plantillas incluyen una clase CSS con el mismo nombre (widget-content) que determina el margen del interior de cada widget, el color, etc, mientras que la clase “.widget” define el estilo de éste en su totalidad, incluyendo el título y estableciendo su posición dentro del sidebar, header o la sección que corresponda.
El resto de las partes de la plantilla queda definida de la misma forma. No obstante, en el resto de capítulos de este tutorial se analizarán todas y cada una de ellas para ver los errores más comunes y las infinitas posibilidades de personalización que ofrecen las hojas de estilos CSS. Si tienes alguna sugerencia o no entiendes algo de este artículo, no dudes en dejar tus comentarios y compartir tus ideas con todos nosotros.
- Como crear una plantilla para Blogger – Segunda parte: Temática y estilo.
- Crea tu propia plantilla para Blogger – Tercera parte: Codificación.
- Como crear una plantilla para blogger – Cuarta parte: Distribución.
Enlaces:
- Guía breve de CSS.
- Manual de CSS, hojas de estilo.
- Otro manual de CSS.
- Guía para escribir documentos HTML.
- Manual XHTML.
- Manual de HTML.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
57 Comentarios
Hola, interesante el post, he buscaod mucho en la web y no encuentro ninguna guia de como crear plantillas. Hast echo la segunda parte de la guia?
Por mi parte soy bueno con el diseño en photoshop, pero no con el codigo y necesito aprender como se hace puesto que quiero crear mi propia plantilla para blogger y posiblemente seguir creando templates para que la gente baje.
Si tienes mas info me la envias?
Hola Radix! Gracias. Hace unos días publiqué la cuarta parte de esta serie de posts, desde donde puedes acceder al resto de entradas en los enlaces que se encuentran al final del artículo. La práctica es la mejor herramienta para aprender a usar el código, aunque si necesitas cualquier cosa ya sabes donde estoy. Un saludo y gracias por comentar 
esta muy bueno todo, solo que ya no se puede acceder a la segunda parte. Por favor soy recontra novato, podrias darme algunas recomendaciones para mi blog? las que sean, seran bienvenidas
Hola! Gracias, ya he actualizado la entrada y se puede acceder a las 4 partes de esta serie de posts. Si me permites darte una pequeña sugerencia, te diría que buscaras otra plantilla que fuera un poco más funcional y atractiva a primera vista. Hay cientos de diseños disponibles, algunos aquí en Plantillas para Blogger”>, en Blogandweb.com, en Jackbook.com, etc.
Saludos!
Es impresionante la velocidad y amabilidad con que responden. Así que me he animado a hacer una consultita mas amplia: yo sólo necesito un blogcito mas o menos bonito con una sola sidebar (no importa izquierda o derecha), y sobre todo q tenga un Menu. Hay muchas plantillas bonitas pero mi problema es la personalizacion, por ejemplo la plantilla de Zona Cerebral esta bacán pero cuando la aplico a mi blog sale la imagen header de Zona Cerebral (aunque eso se resuelve, en Elementos de pagina, editar Cabecera pegar la URL de una de las imagenes de la pagina de Enrico q recomendaste), pero el titulo de esa cabecera salen muy chiquita, las fuentes, no se como agrandarlas. Y como digo: el Menu, no se cómo agregarlo. Mira dale una miradita por favor y recomiendame: http://www.tiensjaen.blogspot.com. Si es necesario te doy mi contraseña para q le puedas hacer modificaciones directas. Todos aquí confiamos en tu ayuda desinteresada. Gracia anticipadas.
Tambien quería recordarte que las soluciones particulares q le des a alguien individualmente servirán de hecho para otros usuarios que tengan problemas similares.
Te deseo muchos más exitos en este 2008.
muy bueno, muy bueno, exelente 
Gracias Saske, me alegro de que te haya gustado
Hola,Iván!
Una entrada genial! No sabes lo que se agradecen tutoriales así!!
Yo estaba intentando aprender con algún programa tipo Frontpage o Dreamweaver, pero me pregunto si realmente es necesario. Con todos los datos que das aquí podemos modificar una plantilla y crear una nueva directamente, no?
Un saludo!
Hola Miranda! Muchas gracias, me alegro de que te pueda servir de ayuda. Adquirir nuevos conocimientos nunca está de más, pero creo que no es necesario que utilices Frontpage, Dreamweaver o similares para aprender diseño de plantillas. Con este tutorial completo, puedes conocer los códigos, atributos, estructuras y modificaciones más comunes de Blogger.
Saludos
Hola Iván, he tratado de reemplazar la plantilla de mi blog http://www.viajesreal.com , por la de zona cerebral, pero me manda un error como este “Your template is invalid because the tag ‘div’ appears inside of the tag ‘head’.”, no se realmente a que se debe ya que lo he revisado de pies a cabeza. Agradecería mucho tu ayuda.
Hola Roberano! Prueba a subir la plantilla XML directamente a través de la página de edición HTML de la plantilla, en lugar de copiar y pegar el contenido y reemplazarlo por el anterior.
Saludos!
olaa.. aun no tengo blog, pero con mi novio estamos creando la web oficial de nuestra ciudad de my chemical romance.. la verdad no se nada de como hacer.. y tampoco entendi, por k solo se usar el photoshop. pero tu sabes a quien le puedo mandar a hacer una plantilla con una imagen photoshopeada por mii?
si saves.. porfavor miki_barbarita@hotmail.com
se te agradece mucho ^^
adios
hola!!! waow!! si que has sido de gran ayuda!!! he estdao buscando en internet algo parecido hace mucho rato y ahora apenas lo encuentro 
SUPER
a penas tenga listo mi blog te lo envio
thxxxxxxxxxxxxxxxxxxxxxxx
Ok Catalina. Muchas gracias por comentar. Sinceramente, me alegro mucho de que este post te haya servido de ayuda.
Un saludo!
reconozco que soy una negada,no me sale…podrias echarme una mano?
gracias
buen tutorial, me aclaro algunas dudas, muchas gracias!!
quisiera alguien me ayudara, no se como poner este tipo de comentarios que se dejan en el bog, como este precisamente el que estoy usando, quiero que la gente que ve mi blog deje sus platicas y se vean sus comentarios en mi mismo blog en la parte inferior, uso el blogger de gmail y soy nuevo en el tema, ayudenme a mi cuenta de hotmail, que es dalofr@hotmail.com, se los agradeceria un monton, gracias, gracias,gracias…
hola buenas, mira estoy haciendo un blog de un eauipo y me gustaria añadir un elemento de paguina, donde ponga jugadores y salga el nombre de cada uno con una descripcion donde juega y eso y que se le pueda poner una foto, como podria hacer eso, es que en las opciones que te da para añadir un elemento de pagina con ninguno se puede hacer o aprosimarse a lo que pido, un saludo.
hola JOSE CARLOS lo unico que tienes que hacer es darle a añadir elemento de pagina y darle a imagen!! ahy puedes añadir desde tu pc o desde la web la foto que quieras y tienes la opcion para poner el titulo que quieras en este caso el nombre del jugados tb tienes el pie de foto tambien lo puedes poner ahy el nombre del jugador… pero claro esto tiene que ser de uno en uno, ya que solo admite una imagen por elemento añadido ok?? espero haberte ayudado algo 1 besazo enorme 
Quiero ayuda, soy nuevo y al tratar de modificar la imagen del titulo que trae la plantilla por una imagen mis, me sale la mia superpuesta a la otra, y cuando en la base esta editado el perfil, en el blog no sale. Te mando la dire para que lo veas y me vas a entender. Ademas traté de editar un menu y no puedo sacar el que trae la plantilla. Gracias y espero tu respuesta.
http:// evangelistadanibenavides.blogspot.com
Hola! Estoy preparando un blog sobre consultas informáticas, reparaciones, software libre y así. Siempre he programado para web directamente en html, así que este tutorial me está siendo de gran ayuda. No soy tan bueno con el diseño, lo mío es la parte técnica, pero bueno… Supongo que podré prepararme un banner decentillo. Ahora estoy más centrado en ampliar tráfico y funcionalidades. Muchas gracias por tu esfuerzo… No hay nada como leer un tutorial como el tuyo, explicado con claridad, completamente y sin florituras. Estoy preparando mi plantilla y te dejaré una nota cuando esté completa y cargada. ¡Un abrazo y no dudes en contactar para lo que precises!
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The document type declaration for root element type “html” must end with ‘>’.
por que cada ves que quiero cambiar la plantilla me sale esto????
Manu. Hola! Es un placer escribir este tipo de tutoriales y saber que ha podido servirle de ayuda a alguien. Muchas gracias por comentar y no dudes en avisarme cuando la tengas terminada.
Jose. Ese error se debe a que alguno de los elementos, bloques de código o widgets que has insertado o modificado en la plantilla, no está cerrado correctamente. Por ejemplo, una etiqueta
. Tienes que buscar los cambios de código que hallas hecho últimamente para ver donde puede estar el error.
Saludos y felices fiestas!
Necesito por favor que alguien em indique como puedo colocar el pie de foto, en mi blogspot. Por favor es importante.
Hola te escribo porque me gustaria incluir en mi blogg una pagina de comentarios como la que estoy usando ahora para que los usuarios dejen sus comentarios.
saludos.
m.l
holami problema es y quisiera que me ayudaran en eso es que tengo un blog y cuando hago entradas y las publico no las abre como otra direccion si no que se quedan en la principal siempre y quiero poer un menu para hacerlos como secciones pero no puedo porque siemopre hace eso es como no salir de la misma pagina principal de entemano gracias
Creo que me voy a volver loca… esto es mucho más complicado de lo que parecía!!! Estoy dessesperada, creo que es imposible….
Saludos!
Super increible tu tutorial de Blogger, sobre todo conciso y facil de entender.
Me va a resultar muy valioso ahora que voy a empezar a diseñar mi blog. Muchas gracias.
Gracias Fabriccio, me alegro de que te haya gustado y sobre todo espero que pueda servirte de ayuda para diseñar tu blog
Saludos
Hola¡¡¡¡¡
He probado todas estas formas de poner una imagen (grande, pequeña, patterns…) como fondo de mi blogger. Pero nada, no hay manera. 
¿Alguna otra sugerencia? 
Gracias y enhorabuena, te lo has currao. 
1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y buscas lo siguiente:
body {
background:$bgcolor;
…
}
2. Tendrás que agregar después de background:$bgcolor lo siguiente (lo que está de color azul):
body {
background:$bgcolor url(http://Aquí la direción de la imagen) fixed no-repeat top left;
…
}
______________________________________________________
Background: Fondo de la página. Puede ser un color (p. ej: #6c82b5;) o bien una imagen de fondo, en cuyo caso es aconsejable insertar una imagen reducidas dimensiones y hacer que se repita a lo largo y ancho de la página (p. ej: url(URL DE TU IMAGEN) top repeat-xy;). También puede interesarte añadir una imagen de fondo estática que se desplace junto con el scrollbar de la página incluyendo lo siguiente: url(URL DE TU IMAGEN) no-repeat fixed;
______________________________________________________
#outer-wrapper {
background: #FFFFFF;
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
3) Y ahora, insertaremos el fondo con la imagen o pattern escodigo. Para ello localizaremos esta parte del código en nuestra plantilla:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font -size/* */:/**/small;
font -size: /**/small;
text-align: center;
}
y añadimos la url de la imagen quedando así:
body {
background:$bgcolor
background-image:url(http://img107.imageshack.us/img107/3635/pat3ud0.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font -size/* */:/**/small;
font -size: /**/small;
text-align: center;
}
Hola Arual! Si eres tan amable, te agradecería que me dijeras la dirección del blog o de la página en la que quieres insertar la imagen, ya que así podré ver el código a través de Firebug (extensión de Firefox) y ayudarte más fácilmente. Gracias por comentar
Saludos!
Uysss que velocidad contestando XDXDXDXD.
Aqui te mando la dirección del blog. Hace siglos que lo hice, pero solo fue por curiosidad, aunque ahora estoy muy interesada en aprender a personalizarlos XD.
Muchas gracias, eres mu´ apañao´.
http://miss-kukadas.blogspot.com/
Hola Arual! Prueba a aplicar la imagen de fondo en el atributo “body” del CSS como describías anteriormente, es decir, a través del valor “background: #fff url(http://imagen.jpg) no-repeat;” (por ejemplo) y eliminando el mismo atributo (background) del selector #outer-wrapper.
Saludos!
Jurrrrrrr no me sale
Me ha quedado así…
body {
background: #FFFFFFurl(http://www.cuelgalo.com/viewer.php?id=1238096432_pattern_081.gif)no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
y he eliminado el background
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
El problema es que lo has puesto todo junto. Prueba a separar el color del fondo #ffffff de la url así:
background: #FFFFFF url(http://www.cuelgalo.com/viewer.php?id=1238096432_pattern_081.gif) no-repeat;
Saludos!
¡¡¡¡¡SISISISISISISSIIIIIIIIIIIIIIIIIII!!!!
¡¡¡YA SALE!!!!!
Muchas gracias, eres un makiiiiii
Seguro que aqui no acaban mis quebraderos de cabeza, asi que no creas que te has librado de mí. XDXDXD
¡¡¡MUCHAS GRACIAS!!!!
Bss.
¿No he tardado mucho, verdad? Jiji
Lo prometido es deuda.
He probado con fixed, repeat, no-repeat, cambiar la imagen… y todo perfecto, solo que no sé como hacer que una sola imagen cubra todo el fondo.
El fondo que tiene ahora lo he hecho en photoshop y mide 2000×3000 px una burrada, pero claro yo pensaba que quizas fuera eso. Pero que va, sigue igual.
¡¡¡Gracias!!!
Hola!
Bueno, estoy muy cabeza dura para esto.
Lo que yo necesito es que el texto central, el contenido general de los posts quede más centrado en la página. Y también, que no que el interlineado tan corto.
Ayuda por favor!
@Arual. Hola! Veo que ahora has puesto una imagen de fondo usando el repeat, tanto horizontal como verticalmente. El atributo repeat es una buena técnica para utilizar una imagen de fondo sin que aumente demasiado el tiempo de carga de la página. No te recomiendo que utilices una imagen de fondo con esas dimensiones, aunque en tal caso bastaría con quitar el atributo repeat.
@Rent2. Hola! Me será mucho más fácil ayudarte si me dices la dirección del blog en el que quieres hacer esas modificaciones. Gracias!
Saludos!
Hola¡
Ok, cambiaré la imagen por una mas peque. Pero he quitado el atributo repeat y no hay cambio. También probe con no-repeat, pero así me sale la imagen en la esquina superior izq.
Gracias por contestar¡¡¡
hola ,me gustaria hubiera a disposicion una plataforma para editar la plantilla blogger de manera mas facil…como los sitios de Myspaces o Yuwie…en donde hasta se le puede colocar una imagen de fondo.cambiar las fuentes,dolores…etc
abrazos!!(existe eso que pido?)
Hola Mauricio, te cuento que estoy programando una herramienta de escritorio para realizar dicha tarea, aún estoy en avances pero apenas tenga una versión de prueba la dejaré a disposición de todos.
muy buen tuto… gracias!!
hola!!! buenisimo todo!!,mira tengo en el pie de mi blog un bloque en donde ubico los banners de los directorios deonde estoy registrado…creo que estan un poco desprolijos….mi ignorancia me impide deducir donde empieza un codigo y termina otro para poder ordenarlos…existe otro modo de hacerlo???..son bienvenidas opiniones y criticas constructivas acerca de la estetica de mi blog…abrazo cordial!! gracias por su trabajo!
Quiro poner como fondo una plantilla toda de color amarillos ¿como hago?
Hola.
He leído todos los aportes y me parece fantástico contar con personas dispuestas a ayudar.
Tengo un interrogante.
He podido notar que para la visualización de los blogs, todo se hace ON-LINE. Quisiera saber si existe algún programa que me permita visualizar mi blog de manera off-line como cualquier página web.
El Dreamweaver no funciona para esto, aunque puedo editarlo.
En internet no he encontrado información al respecto. Agradezco la ayuda que me puedan brindar.
Hola! yo tambien estoy empezando en esto del blogger y quiero personalizar un poco mas mi blog pero solo quiero hacer el diseño de fondo y usar la misma distribución
mi duda es de cuánto debe ser la medida de la imagen de fondo, no el header, de cuantos pixeles recomiendas para que no sea muy pesada, y como se inserta la imagen en el codigo, y puedo poner una imagen para la parte superior y otra en la parte inferior??
t agradezco tu ayuda.. saludos!!!
no entendi nadita:S:S
Help me!
Hola, utilizo blogger y quiero hacer que el título de la página sea Nombre del Blog | Título del post
Actualmente dentro el título se genera con el siguiente código: <title><data:blog.pageTitle/></title>