Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Diseñando tu plantilla: Tutorial paso a paso

Es muy probable que si llevas poco tiempo usando blogger pienses que el diseño es algo complicado y que una plantilla a tu gusto será difícil de conseguir, al no ser que la obtengas de alguno de los muchos sitios web que las ofrecen gratuitamente.

La pena de instalar una plantilla previamente diseñada es que núnca llegará a ser única a no ser que la edites por completo, por lo que, fácilmente, podrás encontrar en poco tiempo, otros blogs con el mismo aspecto que tu bitácora.

Siendo un elemento imprescindible para el éxito del mundo blogger, el diseño es algo que debe tomarse de manera seria.

Con esta entrada te enseñaré a cambiar el aspecto de tu blog de una forma sencilla, con instrucciones fáciles de entender y que, poco a poco, se irán complicando (en tutoriales posteriores) para mejorar así tu conocimiento como diseñador/a.

Nuestro propósito será el de...

Diseñando tu plantilla blogger, Tutorial paso a paso


En mi caso, haré uso de la plantilla Mínima para , ofrecida por blogger al crear un blog o en el apartado de diseño, pulsando el enlace Seleccionar plantilla nueva.

Prácticamente todas las plantillas de blogger coinciden con los parámetros de código que editaremos a continuación para darle el nuevo aspecto al blog, por lo que es muy probable que (en caso de no tener instalada la plantilla mínima) todo salga correctamente.

Para conseguir el diseño que ves en la imagen modificaremos lo siguiente:

1) El fondo del blog, al cual le atribuiremos una imagen en tonos azules (podrás editarla).
2) La cabecera del blog, que obtendrá una imagen de fondo color naranja (también podrás editarla).
3) Ampliaremos la zona de las entradas e insertaremos un fondo blanco, facilitando así a los lectores la lectura de nuestros artículos.

Antes de empezar... ¡Una copia de seguridad!

Como núnca se sabe lo que puede pasar, aconsejo que hagas una copia de tu plantilla para no perder así tu diseño actual. En esta entrada explico brevemente como hacerlo.

Editando la cabecera

Diseño>Elementos de la página




Haz clic en el enlace "Editar" que aparece dentro del recuadro con el título de mi blog. En mi caso tendrá este aspecto:

Diseñando tu plantilla blogger, Tutorial paso a paso


En el apartado Imagen, marca la casilla que dice desde la web e inserta esta dirección en el campo de texto:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtf4eoq0uOyJmglAmgQP1sx6xZYJ46DaB4WKoy3zy9cOse2ZYcRPDaWV8ku7eNiVHohwlUT43hVSf748YypH_GCoduWJu9EoBQJTGBBZp_RIIfGk2V4ymtGkIQ2ep4Sd8back9vNTkT8c/s0/blcabecera.png

Guarda el gadget y obtendrás algo como esto:

Diseñando tu plantilla blogger, Tutorial paso a paso


Fíjate en los bordes del header... ¿No son un tanto molestos?


Diseño>Edición de HTML>expandimos artilugios




Busca este bloque de CSS en tu plantilla:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Cambia el márgen de 5 píxeles (en la segunda línea) por uno de 0px, con cuidado de no borrar las comillas (;).

En la tercera línea, reemplaza 1px solid $bordercolor por el término none.

Ahora busca este otro bloque:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Y vuelve a reemplazar 1px solid $bordercolor por el término none.

Con esto habremos hecho desaparecer los bordes de la cabecera.

Añadir una imagen de fondo

En mi caso he utilizado una imagen de fondo con tonos azules y un degradado que termina en color blanco (ver imagen) pero puedes hacer uso de cualquier otra.

Visitando bgMaker's encontrarás una enorme cantidad de fondos que pueden descargarse haciendo clic en el enlace que denominado "download".

Si por el contrario ya tienes la imagen y únicamente necesitas alojarla en un servicio para poder utilizarla en el blog, accede a esta entrada con la que aprenderás a hacerlo. Es importante que una vez hayas subido la imagen, no publiques la entrada. Copia su dirección (URL) como explico aquí y resérvala.

Busca lo siguiente:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Cambia la línea background:$bgcolor; por esto otro:

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwPBoBcz5jnMINh3pQl-DsivhvQH22zwFCiD1bW9lGCb7nuBb4niwfs390Bmd4oXOZOUBxnMpCmERiz6ymMKuCHBHtFtdVzaCP9HheOrf61WlfTCG3EEmHYiSQsLg0bsxCLWtyw0wQB1cA/s1600/body_bg.gif") repeat-x fixed #E7EEF6;

Si vas a utilizar tu imagen personal sustituye la url (resaltada en gris) por la que anteriormente reservaste.

Al utilizar la imagen que yo proporciono y hacer vista previa, comprobarás que el blog adquiere este aspecto:

Diseñando tu plantilla blogger, Tutorial paso a paso


Ampliando la zona de las entradas y añadiendo un color de fondo

Encuentra este bloque:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Añade estas líneas debajo de #outer-wrapper {...

background: #ffffff;
border-left: 2px solid #cccccc;
border-right: 2px solid #cccccc;

Y cambia el valor 660px; por 860px; para ampliar el outer-wrapper (bloque central).
Con esto habrás incluido el fondo de color blanco y dos bordes con un ancho de dos píxeles a los laterales para "dar forma" al bloque central.

Seguidamente busca esto otro:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Y edita 410px; por 610px;.

Haz vista previa de la plantilla...


Diseñando tu plantilla blogger, Tutorial paso a paso


Con esto ponemos fin al primer tutorial. Ten en cuenta que la imagen de la cabecera también puede editarse y, de la misma forma que con el fondo del blog, podemos conseguir su URL para insertarla en el campo de texto citado en el primer paso.

Guarda tu plantilla para terminar.

AlejoBlogger dice...

Genial Jaime:D
tu siempre explicandonos:o

Jaime Trujillo Escobedo dice...

Gracias a ti por comentar, Alejandro ^^.

Vanesuky dice...

Gracias Jaime por tus explicaciones tan claritas!!

Besines guapa,

Vanesuky.

Jaime Trujillo Escobedo dice...

¡Gracias a ti, Vanesuky! Veo que has cambiado el diseño de Vanesuky entre Fogones. Me gusta el menú que utilizas ;).

Anónimo dice...

Jaime, nunca avia visto algo como esto.
Estoy muy imprecionado, hace mucho que no comentaba en tus entradas, gracias a ti tengo mucha experiencia en el blog, este fue el primer blog que vi en mi Ocio como Bloggero.
Y esta vez te pasaste es el mejor post que e visto pensaba que ya tenias uno antes pero ahora me doy cuenta que ya tienes el tullo, muchas gracias.

Saludos

Jaime Trujillo Escobedo dice...

Muchas gracias wwe-cv, ya que son palabras como las tuyas las que hacen que mis artículos cobren sentido y me hagan ver que os agradan y ayudan en el mundo blogger.

¡Saludos!

Oskar dice...

For you http://elmiradordelared.blogspot.com/2010/05/premio-tejiendo-suenos.html

Jaime Trujillo Escobedo dice...

¡Thank you so much, Oskar! It's such a pleasure for me, recieving this prize.

Voy volando a recogerlo, amigo.

Fuentecillas dice...

¡¡ A ver si me animo ¡¡ Tengo más miedo que una noche de nublo, es decir, que se vaya todo al garete.
Soy una insegura hijo.
Eres la caña, cuanto nos enseñas y nos picas con esto de las tripillas del blog.
Saludos chiquillo

Jaime Trujillo Escobedo dice...

Y no eres la única, Fuentecillas. Pero te aseguro que realizando una copia de seguridad de tu plantilla (como se indica en la entrada) o descargando el blog (en el apartado de Configuración>Exportar blog) no habrá ningún problema, y si lo hubiese, siempre podrás preguntarme.

Lo mejor de este tutorial es que te permite darle al blog tu aspecto favorito, no tiene que ser obligadamente el diseño de la imagen.

Si te decides... ¡Suerte! ;).

Paco Muñoz dice...

Estimado Jaime
Soy un usuario de Blogger. Mi blog es www.notascordobesa.blogspot.com antes tenía una plantilla standar de Blogger, ahora he instalado la Plantilla Simple de Josh Peterson. Con la tecnología de Blogger.
Como también soy usuario de Facebook automáticamente la publicación en el Blog se reproducía en Facebook. Desde que cambié la plantilla ya no lo hace y tengo que publicar en Facebook manualmente.
¿Es posible que la nueva plantilla sea la causante de la no publicación? Tengo ligeros conocimientos de código sin llegar a ser experto.
Muchas gracias

Jaime Trujillo Escobedo dice...

Paco Muñoz, en Facebook, ¿Has añadido un feed de tu blog en el apartado 'Notas'? Lo digo debido a que dicha red social cambió su configuración recientemente.

1) Inicia sesión en Facebook
2) Accede a Inicio (menú superior)/Aplicaciones (panel lateral)/Notas
3) Escoge--> Configuración de las notas/Editar opciones de importación, en el panel lateral.
4) Introduce como dirección esta línea:

http://tublog.blogspot.com/feeds/posts/default

¡Saludos!

Anónimo dice...

Che te han usado el tutorial: http://wiki.taringa.net/posts/ebooks-tutoriales/5509873/Dise%C3%B1a-tu-Plantilla-para-Blogger:Paso-a-paso.html

Jaime Trujillo Escobedo dice...

Muchísimas gracias por hacérmelo saber, Anónimo. Al parecer un amable usuario comentó y el 'falso autor' agregó una referencia (gracias desde aquí a oOCNEOo y bjbbomb por hacer referencia a un artículo que me llevó más de una semana escribir).

kelvin dice...

sos groso loco, en serio solo dignarse a hacer algo por las demas personas es de agradecerse
muchas gracias

Jaime Trujillo Escobedo dice...

Ayudar es maravilloso, Kelvin. Me alegra que este tutorial te haya enseñado cosas nuevas.

¡Gracias a ti por comentar!

dfhgf dice...

jaime como elijo una plantilla no prediseñada??

Jaime Trujillo Escobedo dice...

Javier Alfaro, accede a Diseño>Edición de HTML y al final de la página, en el apartado Plantillas antiguas encontrarás un enlace denominado "Seleccionar plantilla de diseño". Haz clic y escoge la plantilla que desees.

dfhgf dice...

aaaa ya grax jaime ntoncs con la plantilla minima puedo modificar el blog como yo quiera verdad

Jaime Trujillo Escobedo dice...

Por supuesto Javier.

Lomas natural dice...

Hola Jaime tengo un problema, quiero poner una imagen en la cabecera, entro a diseño y no me sale la opcion editar, por lo tanto no puedo subir ninguna imagen ¿me puedes ayudar? gracias

Jaime Trujillo Escobedo dice...

Flor, trata de hacerlo siguiendo este otro procedimiento y avísame en caso de no funcionar.

Lomas natural dice...

Jaime perfecto, me falta una cosaque la imagen de la cabecera quede pegado al Outer-Wrapper, aunque no de si sepuede mi blog es http://nerviosayfeliz.blogspot.com/ muchas gracias por todo

Jaime Trujillo Escobedo dice...

Flor, prueba a incluir esta línea justo antes de la etiqueta </head>:

<style>#content-wrapper{margin-top:-11px;}</style>

Hanna Balusa dice...

Hola! Estoy cambiando el diseño de mi blog y me gustaría saber cómo podría añadirle un fondo creado por mi.
He intentado seguir tu tutorial pero no encuentro esas lineas en mi plantilla, y también entrando al diseñador de plantillas no me es posible cambiar el ancho o el diseño para poner 3 columnas.
Mi blog es Hanna Balusa Creaciones.

Podrías orientarme sobre que plantilla debo elegir para que salga ese código que muestras o que lineas debo cambiar?
Un saludo!

Jaime Trujillo Escobedo dice...

¡Bienvenida Hanna Balusa! La plantilla que utilizas ha sido previamente modificada y por lo tanto te resultará algo lioso encontrar etiquetas requeridas por un gran número de trucos. Si además deseas personalizarla a tu gusto y, por ejemplo, hacer uso de un fondo personal, te recomendaría lo siguiente:

Accede a Diseño>Edición de HTML y desciende la página hasta localizar un enlace denominado:

Plantillas de diseño (lanzado en 2006)
Seleccionar plantilla de diseño

Bastará con elegir la plantilla Mínima (que es la utilizada en esta entrada) para que los códigos vuelvan a aparecer.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo