Friday, August 17, 2012

Stylish Jquery Slideshow To Blogger Sidebar

This is a jquery slideshow, Specially design for the sidebar.So you can add this featured slide show to your sidebar. So, your blog will looks like attractive.You can add this gadget easily.You can take a look at my earlier slideshows here. Im already added demo for this slideshow. you can check it,

Jquery-Slideshow

Demo

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'.

    You are done...

0 comments:

Post a Comment