Rotador de banners

Cuando queremos intercambiar enlaces con otros blogs o webs, lo mejor y mas atrayente es hacerlo mediante banners. Pero a veces, esto supone 'inundar' nuestro blog de imagenes que nos ocupan mucho sitio. La mejor solucion es poner un rotador de banners, asi podremos añadir las imagenes que queramos en un solo espacio. Pensando en este tema, he diseñado este rota-banners con CSS3 y jQuery, en el que las imagenes van cambiando con un efecto fade suave automaticamente.

Para añadirlo a tu blog, tienes que copiar el codigo de abajo y pegarlo donde quieras mostrarlo. Donde esta indicado en color rojo, pones las urls de los enlaces y de las imagenes de cada banner. si quieres añadir mas, tienes que poner la linea <div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div> tantas veces como quieras. Si quieres poner menos banners, elimina las que te sobren.

El tamaño que le he dado a las imagenes es de 300x150 px. Si quieres modificarlo, tienes que hacerlo en la siguiente linea del codigo:
Pero entonces tambien tendras que modificar el tamaño del contenedor principal en la siguiente linea:


Una vez lo tengamos, nos quedara asi:

☆ webs amigas ☆

ver el codigo

<div id="rotadordebanners">

<div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div> 

<div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div>
 
<div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div>

<div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div>

<div><a href="URL ENLACE" target="_blank"><img src="URL IMAGEN"></a></div>

</div>

 
<style>
#rotadordebanners img{width: 300px;height: 150px;border:1px solid #797A79;background:#ffffff;}

#rotadordebanners {
    margin: 0px auto;
    position: relative;
    width: 300px; height: 170px;
    padding: 15px 10px 10px 10px;border:2px solid #797A79;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
background: #7d7e7d;
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );

}
#rotadordebanners > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

</style>

<script src="//code.jquery.com/jquery-latest.js"></script>

  <script>
(function() {

$("#rotadordebanners > div:gt(0)").hide();

setInterval(function() {
  $('#rotadordebanners > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#rotadordebanners');
},  4000);

})();
</script>