relojes blogs

25.2.11

Colocar un rotador de imágenes en tu blog


Comparte esta historia en:

El rotador de imágenes que muestro a continuación esta configurado de 125x125 puesto que el alto y el ancho y el color del marco lo puedes modificar a tu antojo.
Para poner un rotador como este en tu blog sigue estos sencillos pasos:

1. Ve a Diseño HTML, expandir artilugios.
2. Busca la etiqueta </head> y justo antes pega el siguiente código:

<script src="http://img7.xooimage.com/files/4/7/4/xfade2-e5d4fe.js" type="text/javascript"></script>

3. Luego debemos agregar unas lineas de CSS antes de ]]></b:skin> para controlar algunos aspectos de nuestro rotador de imágenes:

/* ROTADOR DE IMAGENES<br /> ----------------------------------------------- */<br /> #rotator {<br /> border: 2px solid #CC0000;<br /> overflow: hidden;<br /> margin: 10px ;<br /> padding:2px;<br /> position: relative;<br /> width: 200px;<br /> height: 50px;<br /> }<br /> #rotator img {<br /> border: 0;<br /> width: 200px;<br /> height: 50px;<br /> }

Donde dice width: 200px; y height:50px; debemos cambiar por nuestras propias medidas (aparece dos veces, una, es el tamaño del contenedor, otra, es el tamaño de las imágenes).

4. Guardamos la plantilla y...
5. Para terminar pegamos este último código en un nuevo gadget HTML/Javascript:

<div id="rotator"><br /> <a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a><br /> <a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a><br /> <a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a><br /> </div>

Puedes poner cuantas imágenes quieras simplemente añadiendo entre <div id="rotator"> y </div> una linea más.

<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>

Guarda todo

3 Comentarios :

Mary Vasquez dijo...

.. tambien tengo que poner el link de la pagina de donde lo estoy sacando? porque ahi dice url de la web u.u

Antonio Duque dijo...

@Mary Vasquez
Si quieres que las imágenes además de ir rotando estén enlazadas a la página o entrada que tu quieras.. pues pones el link, también lo puedes dejar sin poner.

Gracias por tu visita, y cualquier duda mas que tengas..

robinson rojas dijo...

Hola gracias por la información.
sabes como? o que etiqueta puedo usar para medir el tiempo de las imagenes? para que dure más.. o mejor a un para que la imagen rote solo cada ves que el usuario actualice la pagina o cambien de entrada?

¿Quieres comentar algo?




Estado del blog

entradas
comentarios
1.467 followers
168 seguidores
 días online



Comentarios recientes

 
© Copyright 2009 - 2015 | Contacto | Seguir este blog | Sobre mi | Facebook | Twitter | LinkedIn | Mapa del sitio | Tienda | Conversor | RSS |

@duque71 2015