miércoles, 23 de junio de 2010

Como diseñar tu plantilla de blogger / tutorial blog




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:

http://3.bp.blogspot.com/_blABMJBbYJs/S-2EeYsaraI/AAAAAAAAIcQ/7hj-vh90dYw/s00/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("http://2.bp.blogspot.com/_YXi3vp96gww/S-NbXqx2UtI/AAAAAAAABAs/ZsV5khcgXvE/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.

0 comentarios:

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones