Como dise??ar tu plantilla de blogger / tutorial blog

  • junio 23, 2010

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.

No Comments Found