martes, 9 de noviembre de 2010

ACTIVIDAD #1 Cambiar la imagen de fondo de tu Blog

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


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.


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;


Gracias...espero ver los logros....cuiden su NOTA comentando...!

8 comentarios:

melydesi dijo...

prof no entiendo nada

leon & alejandro dijo...

yo tapoco

Mariluro! dijo...

prof. ese codigo no lo encuentro solo encuentro solo solito el body{ y los demas no los encuentro ayudeme

Zuleima dijo...

Prof.. no entiendo nada.. la verdd.. ese codigo tampoco yo lo encuentro..

BigMaster dijo...

YO TAMPOCO

Anónimo dijo...

profe creo q lo puso un poco bastante difícil yo tampoco consigo el código ¬¬.... ayúdenos...

juan jorge quintela suarez dijo...
Este comentario ha sido eliminado por el autor.
juan jorge quintela suarez dijo...

no entiendo!!!!!!!!!!!! xD
att:Suarez Jorge

Publicar un comentario

 

8vo Diseñado por Nelson Saavedra © 2009