Blogger Widgets Blogger Widgets

Add slideshow To Blogger with nice Effetc

Jquery-SlideshowDemo

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.


<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="Image URL" /></div>
<div>
<img alt="" class="icon-action" src="Image URL" /></div>
<div>
<img alt="" class="icon-action" src="Image URL" /></div>
</div>

After paste above code
* Replace Image URL with your Image URLs
* Better to you 250x250 resolution images

4. Now save your HTML/Javascript'.


by Lord Alio
Share this article :
 

Enregistrer un commentaire

 
Copyright © 2011. LordAlio - All Rights Reserved
/www.LordAlio.com
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger
^ Scroll to Top