En este tutorial te mostrare un deslizador de imagenes con jquery , Este es especialmente diseñado pora usarlo en barra del lado de tu blog.Puedes añadir este deslizador a tu barra lateral,asi tu blog lucira mas atractivo.Puedes insertar este gadget facilmente.Puedes echarle un vistaso al mismo de seguro te gustara.
Ejemplo:Da click boton
Demo
1.Entra en tu cuenta de blogger Diseño
2. Luego da Click Añadir un Gadget y selecciona 'HTML/Javascript
3.Ahora pega el codigo de abajo en espacio de Html-Javascript.
<style>
#slideshow {margin:50px auto;position:relative;width:240px;height:240px;padding:10px;box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow > div {position:absolute;top:5px;left:-1px;right:10px;bottom:10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<div id="slideshow">
<div>
<img alt="" class="icon-action" src="Url de la Imagen" /></div>
<div>
<img alt="" class="icon-action" src="Url de la Imagen" /></div>
<div>
<img alt="" class="icon-action" src="Url de la Imagen" /></div>
</div>
Nota:Despues que pegues el codigo de Arriba:* Reemplace Url de la Imagen con la Url de tu imagen
* Mejor usar Imagenes de resolucion de 250x250
4. Luego guarda la HTML/Javascript'.
Listo tus visitantes y tu disfrutaran de una pagina con un deslizador de Imagenes hermoso para blog de blogger..
0 comentarios:
Publicar un comentario