Ajustes Basicos plantilla blogger


Este debió de ser uno de los primeros posts. Como ya advierto por algún lado, el diseño y el contenido de este blog se van haciendo a la vez, y ése es el motivo de que las entradas estén francamente desordenadas.

Hubiera querido empezar con un post explicativo de los diferentes componentes de la plantilla, el HTML básico y qué es el CSS. Pero no tengo paciencia, y sospecho que mis lectores tampoco. Al fin y al cabo, si tuvieras intención de aprender todo eso, no estarías aquí.

Aquí, vamos a lo fácil, a lo que verdaderamente interesa a quien hace un blog, lo quiere personalizar y decorar, pero no quiere meterse en los entresijos crípticos del template: lo que queremos es básicamente copiar y pegar, y que nos digan el sitio exacto donde hacer los cambios que deseamos.

[+/-] CAMBIAR EL FONDO


    Es el primer cambio que efectúo en mis blogs. Marca la principal diferencia con otros blogs al primer golpe de vista. Puedes poner fondos animados (contrólate, pero si no puedes evitarlo, echa un vistazo a lo que nos propone Aadvark), un imagen que se repita, una imagen grande que lo cubra todo, una imagen pequeña posicionada en el lugar que elijas, puedes no poner imagen y cambiar simplemente el color... En fin, puedes hacer lo que quieras, pero, ¿dónde? Echemos un vistazo a mi plantilla:

    body {
    background:$bgcolor;
    margin:0;
    padding-left: 100px;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    background-color: #EBEAEC;
    background-image: url(http://lablogueria.googlepages.com/fondo.png);
    background-attachment: fixed;
    background-position: bottom left;
    background-repeat: no-repeat;
    border-color: #ffffff;
    border-width:0px ;
    border-style: solid;
    }

    Aquí tenemos especificado en este orden:

    - el color del fondo,
    - la URL de la imagen que queremos añadir,
    - con "fixed" le decimos que permanezca fijo cuando bajamos la página,
    - la posición donde queremos fijar la imagen, en caso de que sea una imagen pequeña,
    - que la imagen NO se repita aunque sea pequeña.

    Puedes añadir líneas si no están en tu plantilla, como por ejemplo background-image, o eliminarlas si deseas por ejemplo que el fondo se mueva a la vez que la página (position:fixed). Si usas una imagen pequeña y quieres que se repita para crear un fondo, cambia no-repeat por repeat, y si deseas que no se repita sino que aparezca en la parte superior derecha de la página, por ejemplo, cambia el bottom-left por top-right.

[+/-] MEDIDAS Y POSICIÓN DEL CUERPO Y SIDEBAR


[+/-] MEDIDAS DEL HEADER Y FOOTER


[+/-] DESPLAZAR EL CUERPO HACIA UN LADO

    Y para completar esta entrada, supongamos que deseas que el cuerpo de tu blog, que ahora mismo aparecerá en el centro, se desplace hacia la izquierda, para dejar al descubierto la imagen de fondo, o lo que sea. En este blog puedes ver que el margen izquierdo es mayor que el derecho. ¿Dónde hacemos este ajuste? Pues aqui:

    body {
    background:$bgcolor;
    margin:0;
    padding-left: 100px;
    color:$textcolor;

    Le estamos diciendo a todo el conjunto del cuerpo, que se desplace 100 pixels DESDE la izquierda, o sea HACIA la derecha.

Con estos ajustes básicos, habrás conseguido personalizar tu blog y cambiar su apariencia estándar y uniforme, diferenciarlo del resto. Puedes usar cualquier plantilla, y transformarla a tu gusto. ¡Suerte, y que la inspiración te acompañe!

0 comentarios:

Publicar un comentario