Como crear una plantilla para blogger – Cuarta parte: Distribución.
Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!
Llevaba mucho tiempo sin escribir un nuevo capítulo de esta serie de posts sobre como crear una plantilla para Blogger, pero aún no la había terminado y creo que es necesario que siga con algunos de los códigos más importantes para añadir una segunda sidebar al blog, ajustar sus dimensiones, alinearla con respecto al main o personalizar la apariencia de las entradas, entre otros. Antes de comenzar a modificar el código de tu plantilla, te aconsejo que hagas una copia de seguridad de la misma y que le eches un vistazo al resto de artículos que componen esta serie, cuyos enlaces puedes encontrar al final de este post.
En el capítulo anterior, puedes ver todos los códigos CSS empleados en la personalización del header y de los elementos comunes del blog, como el body o la apariencia de los enlaces de texto. Por tanto, es hora de seguir con la composición del outer, del main y de el/los sidebar/s.
Outer-Wrapper.
Este etiqueta se utiliza para hacer referencia al contenido útil del blog sin tener en cuenta el fondo del blog, es decir, a la parte de la página en la que se integran la cabecera, las columnas laterales, las entradas y el pie de página, que puedes ver delimitada por una sombra vertical en el diseño de este blog. Los códigos CSS que puedes encontrar dentro de esta etiqueta en la plantilla por defecto son:
- Width: Como ya mencioné anteriormente al explicar los valores del header, este atributo determina el ancho del elemento en cuestión, en este caso, del contenido del blog. Es imprescindible modificar este valor si pretendes incluir un segundo sidebar en la página, aumentar el tamaño del main, expandir el header, el footer o en definitiva, ampliar las dimensiones del blog en general. Su valor puede ir expresado en píxeles o en porcentaje.
- Margin: Establece el margen que se aplicará al contenido en 4 direcciones posibles, en función del siguiente orden: arriba, derecha, abajo, izquierda. Si sólo se determinan los dos primeros valores, se estará aplicando el margen vertical (arriba y abajo) en función del primer valor y el margen horizontal (derecha e izquierda) en función del segundo. Por ejemplo: margin: 0 auto;
- Padding: Fija el espacio de separación entre los elementos que se encuentran dentro de la sección en la que se aplica. Su efecto visual puede ser igual que el del atributo margin, aunque realmente no se está aplicando un margen, sino que se está añadiendo un espacio de relleno dentro del elemento en cuestión.
- Text-align: Como su propio nombre indica, este valor especifica la alineación del texto de todo el contenido del blog.
- Font: Determina el tipo de fuente que se aplicará en toda la página.
Main-Wrapper.
La etiqueta main-wrapper establece el estilo de la sección en la que se muestran las entradas del blog.
- Width: De la misma forma que en el caso anterior, puede que necesites modificar este valor para ajustar el tamaño de los posts a las dimensiones de tu nueva plantilla.
- Float: Este atributo se utiliza para posicionar el elemento en cuestión a la izquierda o a la derecha del resto de elementos adyacentes, formando un bloque flotante. Sus valores pueden ser right, left o none. Se puede complementar con el código “clear”, cuya función es indicar si es posible añadir elementos flotantes al lado de este. Admite los valores none (permite elementos flotantes en cualquier lado), left (no permite flotantes a la izquierda), right (igual, pero a la derecha) y both (no los permite en ningún lado).
- Word-wrap: Sirve para evitar que una línea de texto demasiado larga, como por ejemplo una dirección URL, desplace la sección en la que se encuentra y descomponga el diseño de la página. Por el contrario, al usar el valor “word-wrap: break-word;” las líneas de texto se dividirán al llegar al ancho máximo del elemento en cuestión.
- Overflow: El código anterior es válido para Internet Explorer. Este atributo ocultará el contenido que se exceda del ancho mínimo de la sección correspondiente, funcionando en Firefox y en Opera.
Sidebar-Wrapper.
Define el estilo del div que contiene el sidebar incluido por defecto en la plantilla. Dentro de esta etiqueta se encuentran los mismos valores que en la etiqueta anterior y seguramente los tendrás que modificar si cambias el tamaño del main o del blog, añades otro sidebar, agregas una imagen de fondo… Hay dos formas de añadir una segunda columna en la plantilla:
- Insertar un nuevo sidebar en otro div.
Entra en el modo de edición HTML de tu plantilla y activa la casilla de verificación “Expandir plantillas de artilugios”. Ahora busca la etiqueta que tiene el id “sidebar-wrapper”. Verás que dentro de esta se encuentran los elementos de página (widgets) que has añadido a través del panel de Blogger. Su aspecto será el siguiente:
<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
…
(widgets)
…
</b:section>
</div>
Justo debajo de este bloque de código es el lugar idóneo para insertar la segunda columna lateral, pegando el siguiente código:
<div id=’nuevosidebar’>
<b:section class=’sidebardos’ id=’sidebardos’ preferred=’yes’ showaddelement=’yes’>
</b:section>
</div>
Ten en cuenta que antes de realizar estos cambios es necesario que modifiques el tamaño del outer-wrapper o del main para evitar que los distintos apartados se solapen. Ahora sólo falta darle un estilo CSS a la etiqueta “nuevosidebar” y a la sección “sidebardos”. Puedes hacerlo copiando el código del otro sidebar y cambiando el nombre #sidebar-wrapper por #nuevosidebar. Para aplicarle un estilo diferente a la sección de la nueva columna lateral, debes crear una clase que contenga el nombre .sidebardos (las clases van precedidas de un punto en lugar de una almohadilla) e insertar allí el código que desees.
- Crear una nueva sección dentro del sidebar existente.
Otra forma más sencilla de añadir un nuevo sidebar a tu plantilla consiste en ampliar el tamaño de la columna existente e incrustar una nueva sección dentro de la misma, alineada horizontalmente con la sección incluida por defecto en el sidebar, usando el atributo float y jugando con el ancho de ambas secciones. El código sería el siguiente:
<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’ showaddelement=’yes’>
…
(widgets)
…
</b:section>
<b:section class=’sidebardos’ id=’sidebardos’ preferred=’yes’ showaddelement=’yes’>
…
(widgets)
…
</div>
Una vez hecho esto, sólo falta determinar la alineación y el tamaño de ambas secciones, creando una nueva etiqueta CSS con el nombre .sidebardos (de nuevo con un punto) y ajustando los valores de la etiqueta .sidebar ya existente. Por último, aclarar que los cambios realizados dentro del código CSS con la etiqueta “sidebar-wrapper” afectarían a todas las secciones que se encuentran dentro del sidebar, por lo que allí se deberían incluir los atributos comunes a aquellas. Un ejemplo del uso de estas secciones podría ser el siguiente, extraído de la plantilla para Blogger Resurrection:
.sidebar {
font:11px arial;
width: 200px;
float: left;
background:#005b8e url(http://img182.imageshack.us/img182/9356/bottomlnm6.gif) no-repeat bottom left;
color:#fff;
padding-bottom: 35px;
}
.sidebardos {
font-size:11px;
width:200px;
float:right;
background:#0b3262 url(http://img170.imageshack.us/img170/2281/bottomrsw5.gif) no-repeat bottom right;
color:#fff;
padding-bottom: 35px;
}
Como puedes ver en el ejemplo, esta forma de alterar el código del sidebar es muy útil para añadir diferentes imágenes de fondo dentro de una misma columna, lo que ofrece infinitas posibilidades a la hora de diseñar la plantilla. Eso es todo por el momento, ya que en el próximo artículo publicaré varios trucos relacionados con la apariencia de las entradas del blog, tanto del título como del texto, la fecha, los tags o la parte inferior de los posts.
Resto de capítulos:
- Como crear una plantilla para Blogger – Primera parte: Composición y estructura.
- Como crear una plantilla para Blogger – Segunda parte: Temática y estilo.
- Crea tu propia plantilla para Blogger – Tercera parte: Codificación.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
40 Comentarios
Perdon por publicar este comenterio en este post, que no tiene nada que ver..
Me conviene publicar enlaces de linkLift en mi blog, teniendo en cuenta que pretendo mantener adsense, a pesar que por el momento tuve un pequeño problemita con adsense???
Es rentable LinkLift para la venta de enlaces??
Por el momento solo estoy adherido al programa de afiliados, hasta estar seguro de la conveniencia de los enlaces…
Hola! Muchas gracias por tu apoyo. He añadido tu blog al blogroll mensual de Octubre.
En cuanto al tema de publicar enlaces a través de Linklift, el único problema que puedes tener es que afecte a tu posicionamiento en Google, debido a su política en relación con la venta de enlaces, aunque esto no debería asustarte en principio.
Si te digo la verdad, aún no he usado Linklift para vender enlaces, más que nada porque me enviaron un e-mail diciéndome que su servicio no está disponible para Blogger por el momento. No obstante, te aconsejo que utilices su programa de referidos, ya que al ser español se consiguen un mayor número de afiliados que en otros sistemas similares como Text-Link-Ads (también muy bueno).
Espero que te haya sido útil. Un saludo y gracias por comentar 
Excelente Guia..!! aun no he podido leer todas las 4 partes, pero espero leeras pronto, ya que estan muy Interesantes..
Gracias por la guia de plantillas 
Saludos 
Muchas gracias Luis. Me alegro de que te guste
Acabo de leer las cuatro partes del tutorial y están muy interesantes, me gusto la forma de explicar y creo que voy hacer una a ver quetal…
Gracias por tus comentarios. Me alegro de que te guste esta serie de posts, a ver si tengo tiempo de publicar la última parte un día de estos. Saludos
Hola!…pedazo de blog tienes eh?
Oye…una colsutilla!…Hace tiempo estoy buscando como agregar un pie de pagina a un blog…(footer se llama?).
Sabes como se hace?
Gracias y disculpa la molestia!
Hola! Muchas gracias. Si tu blog está alojado en Blogger, te aconsejo que crees un nuevo blog de prueba y eligas cualquier plantilla predeterminada que contenga una sección dedicada al footer en la parte inferior de la página. Si bajas hasta el final del código habiendo activado la casilla de “Expandir plantillas de artilugios” verás una etiqueta div dedicada al Footer del diseño, que contiene a su vez una sección y, en su caso, los widgets correspondientes.
Puedes incluirla copiando esa sección HTML y el código CSS de la misma en tu plantilla. Una vez hecho esto, tan sólo tienes que acceder a la edición de elementos de página y te aparecerá la opción de añadir un widget en la parte inferior del diseño.
Espero que te sirva de ayuda. Un saludo!
Wow!….buen dato y muchisimas gracias!
De nada, es un placer Saludos!
Hola…yo otra vez!!…lo primero es para agradecer la ayuda por el asunto del footer, me funciono de maravillas……………y….
para pedirte ayuda otra vez!!!!
Lo mas probable es que sin querer pase a llevar algo del código y me quedó una pequeña calamidad al inicio de la página…esto mira: http://img144.imageshack.us/img144/2905/espaciozy5.jpg
Que pudo haber pasado?…te tendre en mis oraciones!!!..XD!
Hola! Me alegro de que te sirviera de ayuda. En este caso es difícil conocer el origen del problema con sólo una imagen y sin ver el código, pero puede que se deba a que tienes puesto un valor del padding superior en la etiqueta CSS del elemento central de la plantilla (outer-wrapper, wrapper o similares, en función del diseño que estes utilizando).
El valor “padding” hace referencia a los espacios vacíos medidos en píxeles que se encuentran en las 4 direcciones posibles en relación con el objeto en cuestión. Su orden es arriba, derecha, abajo e izquierda, respectivamente. Por ejemplo:
padding:5px 10px 4px 0px;
Espero que te sea útil. Un saludo
….pos que eso era!!!!
Muchas gracias…solucionado!!!
Hola!
Tranquilo..esta vez no te escribo para pedir ayuda si no que para agradecer tu consejos y mostrarte la platilla en la que estaba trabajando…igual hay detalles que afinar (tamaños de fuentes y algunos espacios)pero mas menos ya esta acabado.
http://ilustradamentehablando.blogspot.com/
Eso…y gracias otra vez.
Hola! Muchas gracias. Tengo que decirte que me ha encantado tu blog y sobre todo el diseño de tu plantilla. Lo añado a mis favoritos para publicarlo en el próximo blogroll del mes de febrero. Gracias por comentar
Un saludo!
Waaaa!!!…gracias!!!….(espero tener la plantilla lista para ese dia… 
)
Genial este tutorial en cuatro pasos! Muchísimas gracias por compartirlo!! Yo quería crear una plantilla para mi segundo blog y aquí encuentro bastante material para ir jugando hasta dar con la que quiera!
Muchas gracias, de verdad!
Esperaré con ganas las siguientes partes!
Un saludo!
Como hago que la segunda columna lateral aparezca a la izquierda, puesto que he seguido las instrucciones que salen aca y logro incorporar la segunda columna pero me aparace a la derecha, agradeceria me pudiran ayudar con esto…
se despide desde pepe
Hola,
Que tamaño tiene que tener el background que puedes poner, se puede poner una foto??? grass y saludos
Hola, esta muy buena la guia, veres si puedo leer todas las partes cuando tenga algo de tiempo, salu2…
Estupendo estos temas tratados en capitulos, ya espero el 5º jejeje Saludos
Hola, soy nueva en esto y quiero hacer muchas cosas pero no se ni como decirlas ni entiendo mucha de la “jerga”informática. Soy bastante mayor y me inicio en estas cosas.
He creado una bitácora para mi escuela y deseo ponerle este gadget para que me envien quejas, sugerencias, etc…
¿podeis ayudarme de forma sencilla?
Y MIL GRACIAS a la genialidad que ha creado este tutorial, los adultos te lo agradeceremos, pasaré esta página a mis compañeros
Te escribo porque quería modificar el look de mi blog y no quería utilizar una plantilla prediseñada. Tengo 45 años, poquita idea de HTML (la justa para traducir websites) y gracias a tus tutoriales he sido capaz de introducir unos cuantos cambios de los que me siento orgullosísima! Sería estupendo que continuases la serie, porque una vez que uno se mete en harina, siguiendo tus claras instrucciones, no es tan difícil. Muchas gracias por compartir tus conocimientos.
Un abrazo
@Victoria. Te dejé un comentario en el blog sobre cómo insertar este formulario en Blogger. Gracias a ti por comentar, es un placer
@Miriam. He estado visitando tu web y tengo que decir que me ha encantado. Sinceramente, es una gran satisfacción que el tutorial te haya servido para trabajar sobre tus proyectos. Lo tendré en cuenta y estaré encantado de continuarlo. Hay otros posts similares que están fuera de esta serie pero que también están relacionados con la edición HTML en Blogger:
http://zonacerebral.com/category/tutoriales
Muchas gracias por comentar 
Un saludo y un abrazo!
esta muy bueno el tutorial, hay pocos recursos como estos para ayudar a los q deseammos tener plnatillas personalizadas
Gracias Lim, me alegro de que te haya gustado.
Un saludo!
bueno mi duda es de la tercera parte pero como ya esta la cuarta mejor lo escribi aqui bueno mi problema es el siguiente
puse lo siguiente:
body {
background: url(la url de mi imagen) top repeat-xy;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
y mi fondo se sigue viendo blanco, al principio pense que era la url lo que estaba mal pero la puse en otra pagina y si salio quiero saber por que sucede esto que estoy aciendo mal?
hola bueno resolvi mi problema parece ser que escribiste mal algo no es “repeat-xy” para hacer que se repita a lo alto y ancho “repeat-x” es para lo ancho y “repeat-y” para lo alto
si es para ambos no ay que poner “xy” solo “repeat” y asi si me sirvio
hola pues me gusto la plantilla resurreccion asi que la puse en mi pagina pero tengo un problemita
mi imagen que puse de header tapa la parte de arriba del ¿main? (donde comienza a escribirse las entradas, mis post y todo eso)
y la verdad no quisiera modificar mi imagen
quisiera saber como hacer que mi header se situe un poco mas arriba no me importa tapar la parte de arriba del background sinceramente queria cambiarlo.
Y otra dudita ya para terminar
las sidebar tienen cierto diseño que no combinaria con el background que pienso poner ya que en la parte inferior tran color azul y un reflejo en negro quisiera saber como quitarle eso
muchas gracias de antemano
resolvi lo del header tuve que borrar algunas partes de la platilla para sustituirlas por las de la plstilla minima pero no encuantro la forma de quitar esa parte de abajo de los sidebars
hola que tal…..mira estaba viendo el codigo y por mas que lo cambio y lo vuelvo a hubicar y lo reviso una y otra ves cuando lo intento salvar me aparece este mensaje
“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: Open quote is expected for attribute “{1}” associated with an element type “id”.”
BUENO TE CUENTO LO QUE YO QUIERO HACER…..QUIERO QUE EN MI PARTE DE SIDEBAR TENER UN ESPACIO DE TAMAÑO NORMAL Y DEBAJO DE EL QUE ESTE DIVIDIDO EN 2…..BUENO ESPERO ME AYAS ENTENDIDO Y APRECIARIA MUCHO TU AYUDA GRX……
Muchas gracias, tus articulos siempre son buenos y utiles, buen trabajo.
saludos
etto U…U no entendiii algooo sobre cuando agrego el ”
” me dic q tengo q agregarle algo XML algo asi T___T
upss
ese
¬¬ no me dja mandarlo etto… es sobre cuando se quier agregar sidervas U…U
Hola! Muchísimas gracias por tu post! Me sirvió un montóoon!
Pero me quedó algo sin resolver y ni siquiera sé si se puede hacer. Quiero que quede la cabecera del blog en una esquina y al lado, que se vean las entradas. No sé si me expliqué. Quiero que quede la cabecera en la esquina superior izquierda y centrado, al lado de la cabecera, las entradas. Se puede hacer eso? Cómo lo hago? 
Graaaaacias!
Hola Luli!
De nada, gracias a ti por visitar el blog, por leer el post y por comentar
Se a lo que te refieres (más o menos) y si me dices la dirección del blog en el que quieres hacer estos cambios examinaré el código y podré decirte exactamente lo que tienes que cambiar.
Un saludo!
Mi problema es el siguiente hay un template (un hermoso template) que esta hecho en la vieja blogger que logicamamente cuando lo quiero cargar en el nuevo blogger me da el error de estar mal hecho el xml. Algo de oido toco y estoy empezando de a poco a ver si lo puedo pasar, pero hay veces que me molesto y empiezo a hacer “copypaste” de manera indiscriminada sin tener idea… eso juega en mi contra lo se, pero…. me darias una mano? o por lo menos algunos tips para saber que parte seria en que… no se si me explico… me di cuenta luego que “.entry” en el viejo blogger vendria ser “.post” en el nuevo y cosas así….
El template que quiero convertir es este: http://foliage-for-blogger.blogspot.com/
Saludos y gracias!
Hola
Antes de plantear mi inquietud quiero felicitarte por tu valioso blog
He tratado inutilmente de subir una plantilla, he seguido todos tus explicaciones y no me resulta
tome las medidas de la plantilla de otras, y nada me resulta, ojala puedas ayudarme ya que estoy practicando y quiero un blog con una plantilla personal,
Muchas gracias de antemano
Sholy
Iván, te di una manito, me afilie a LinkLift desde tu Banner!!! Lo que uno gana por dar tanta info, jejeje..
Si queres, pasate y conoce mi blog…Suerte..