ROTADOR DE BANNERS CON REDIRECCIÓN

ROTADOR DE BANNERS CON REDIRECCIÓN .

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.


Si queréis verlo en acción podéis ir a mi Bloc de Demos:

Para añadirlo a tu blog, tienes que copiar el codigo de abajo y pegarlo donde quieras mostrarlo.

<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: 250px;border:1px solid #797A79;background:#ffffff;}

#rotadordebanners {
    margin: 0px auto;
    position: relative;
    width: 300px; height: 270px;
    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> 

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 esta linea tantas veces como quieras. Si quieres poner menos banners, elimina las que te sobren.

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

El tamaño que le he dado a las imagenes es de 300x250 px. Si quieres modificarlo, tienes que hacerlo en la siguiente linea del codigo:
#rotadordebanners img{width: 300px;height: 250px
Pero entonces tambien tendras que modificar el tamaño del contenedor principal en la siguiente linea:
margin: 0px auto;
    position: relative;
    width: 300px; height: 270px;

 Fecha de la Publicación; 23-01-2019

 Fuente; redeando 

 Publicado por;