Cambiar la imagen del blog en segundos

Colocando un código en un gadget HTML podemos cambiar la imagen de fondo de nuestro blog sin necesidad de modificar nada más.

Sin imagenSin imagen

En algunas páginas como thecutestblogontheblock tenemos la oportunidad de escoger entre muchos modelos, incluso para plantillas de tres columnas.
Después de pinchar sobre el modelo que nos agrade, solo tendremos que copiar el código que allí nos proporcionan y pegarlo en un gadget HTML.
El cambio será instantáneo.
Hay que tener en cuenta que esta web, y casi todas las que proporcionan este tipo de fondos, incluyen en el código un enlace a su web (incluso con imagen) que suele mostrarse en un lugar bien visible del fondo añadido.

Fondo con enlace

También hay personas como Staci de Simply Chic que proporcionan fondos de forma gratuita para la plantilla Mínima de Blogger, solicitando a cambio un enlace a su blog.
Staci explica con todo detalle como colocar sus fondos desde el CSS de nuestra plantilla:

[1] Ir a Edición HTML de nuestro panel y localizar está parte del código:

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


[2] Cambiar ese código por este otro:

body {
background:$bgcolor;
background-image:url(direct link);
background-position: center;
background-repeat:no-repeat;
background-attachment: fixed;
margin:0; color:$textcolor;
font:x-small Georgia Serif;
font-size/**/:/**/small;
font-size: /**/small;
text-align: center;


[3] Cambiar "direct link" (resaltado en naranja) por la url de la imagen del fondo que hemos escogido en el blog de Staci.

Sin mucha dificultad podríamos combinar ambas cosas, es decir usar uno de los diseños de Staci para usarlo tal como hacen en thecutestblogontheblock y añadirlo mediante un gadget HTML.
Además de esta forma podríamos usar no solo uno de los diseños de Staci sino también uno propio o cualquier imagen que nos agrade.
Solo habría que sustituir donde dice URL_DE_LA_IMAGEN por la url de la imagen de fondo en el código:

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B background: #FFFFFF url(URL_DE_LA_IMAGEN) repeat-x;background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20 background-attachment %3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cdiv%20id%3D%22tag%22%20 style%3D%22position%3Aabsolute %3B%20left%3A0px%3B%20top%3A30px%3B%20z-index%3A50%3B%20 width%3A150px%3B%20height%3A45px%3B%22%3E%0A%3Ca%20border%3D%220%22/ %3E%0A%3C/a%3E%3C/div%3E%20"));</script>


En cualquier caso y dependiendo de la pantalla del ordenador desde donde se vea el blog, pudiera ser que nuestra imagen de fondo no ocupase todo el ancho de la pantalla.
Para prevenir un efecto no deseado, podríamos colocar un color igual o lo más aproximado al diseño de la imagen de fondo en:
body {
background:#DEB887;

0 comentarios:

Publicar un comentario