Stylish jQuery Image Slideshow For Blogger

jQuery is a great user interface and programming for web design. After long time i didnt write a post about jQuery now i will share nice article to you "Stylish jQuery Image Slideshow For Blogger"
I got this post from spiceupyourblog again haha.
Ok this is it Stylish jQuery Image Slideshow For Blogger

Step
1. You can see the demo by clicking here
2. Backup your template first
3. Design - Edit HTML - Expand Widget Template
4. Find </b:skin> code
5. Copy this code below before </b:skin> code

/* Start Slider Code From http://www.spiceupyourblog.com/ */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}

p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}

}
/* End Slider Code From http://www.spiceupyourblog.com/ */

6. And now find </head> code
7. Copy this code below before </head> code

<!-- Start Slider Code From http://www.spiceupyourblog.com/ -->

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#my-slideshow&#39;).bjqs({

&#39;width&#39; : 940,

&#39;height&#39; : 340,

&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- End Slider Code From http://www.spiceupyourblog.com/ -->

8. Save your template

Adding Gadget
1. Go to layout - Add new gadget
2. Choose HTML/Javascript
3. Copy this code below

<div id="my-slideshow">
<ul class="bjqs">
<li><img title="This is a caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiB2AG8D8NZjJZ_TjWGS3Tk5_mP6i8ASa_fktxAGEpvI7dE3YKhxq0xfnIj9Z33Oo-fhy4S3BVgTFbpGYr2jRNeXr201_C9hPZs2xcpIWjY7xuQJGVUagvrktlqYFqDMBjdhkoy11ByX5i/s1600/slider-image1.jpg"/></li>

<li><img title="This is a another caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR3BPCkv_fZTb8hMT0dHrIU5kx0GTq9XfhhLO6Wqf8tqxnp1Ue_wtAuFAoApHguJpTCy07QG0lGKdBS_1mVs0eTqP38dihEq15RkNSZuH_aOB46KJYMjunRkH_7XFAhQZoO5AdXeF5jXlx/s1600/slider-image2.jpg"/></li>

<li><img title="This is a another longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8qgUBsqthdERikmIe1sV9fBbmyj8YN1rBiFAgzhD-kTWx8kmMZa-QxXG6Scm_YAEimGxuub5441W1EUR3SiJkF-KuqsmgCjH55rUtTkJayJcoMWMRhugHxX2xwQpD5A922SgIRSYn458/s1600/slider-image-3.jpg"/></li>

<li><img title="This is a another much longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rq0DYjJ9Lqfab4SLVZh1xffNVaHEBUBq4348Cix2ugrbhejbT0j492yq5ah192EI27YFFLc5yfz-xTQp5iuiBd9LcHlu0HvPA0dxLD6N_PXLpzYr86kfIYfBVmY0dyfiW7pBzTPcNW3x/s1600/slider-image4.jpg"/></li>

<li><img title="This is a another longer caption that can be the lenght of the image or even longer onto the next line." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_z7gIuG2jRFZ-PTaIfnLKA9DYdPq1gs4ZWoM8_uTXclxO_rV0dPuNK0il3ya-oORKPEgmn7qCklm6-Ms85wXhICXmbYdw4Gfu1nPPStGOvlWJq1kyDQ6YPDsWQ9qLgXQV0j0zuBCIeH7H/s1600/slider-image5.jpg"/></li>
</ul>
</div>

4. Last step is save it
5. And you're done. Congratulations with your new slideshow gadget

Important

I've marked some text with other colour, and you can change the value or the text on the marked text with your own. Like Height and Width or Caption and Image

Next post Create Beautiful Recent Comment Widget With Avatar
Source : Spiceupyourblog