How To Create Professional Image Slideshows with Jquery In Blogger

Having a stunning image  slideshow is not only for  the one who runs an image blog.  It can be also used to improve your user's experience and in return will increase blog traffic. Furthermore, it will boast your readers to discuss or comment since people will be more interactive if they will not only read texts but also see  images. Search engine robot will appreciate more to your post which lead to a better  position in search engine results page. I've learned this trick from MBT and do some changes on the script,css and the HTML to have a difference. Before we will go the tutorial, please see first the live demo.

Make Stunning Image Slideshow With Jquery For Your Blogger Blog

Step 1. Go to your Blogger Dashboard >>  Post  or any post you want
Step 2. Copy the  the code below and paste it in your Blogger Post editor page  ( be sureto  switch it to HTML mode).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#BTT-slider').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#BTT-slider {
   width: 590px; /* Keep it 20px-40 px greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#BTT-sliderContent {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.BTT-sliderImage {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.BTT-sliderImage span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.BTT-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 100px;
    left: 0;
    width: 570px !important;
    height:70px;
}
.left {
    left: 0;
    top: 0;
    width: 100px !important;
    height: 335px;
}
.right {
    right: 30px;
    bottom: 90px;
    width: 100px !important;
    height: 335px;
}
</style>

<br />
<div id="BTT-slider">
<ul id="BTT-sliderContent">
<li class="BTT-sliderImage"> 
<a href="http://www.bloggingtipsandtrix.blogspot.com/"><img src="IMAGE URL HERE" /></a>
<span class="top"><h3>
FIRST HEADING HERE</h3>
DESCRIPTIONS HERE</span>
</li>
<li class="BTT-sliderImage">
<a href="http://www.bloggingtipsandtrix.blogspot.com/"><img src="IMAGE URL HERE" /> </a>
<span class="right"><h3>
SECOND HEADING HERE</h3>
DESCRIPTIONS HERE</span>
</li>
<li class="BTT-sliderImage">
<a href="http://www.bloggingtipsandtrix.blogspot.com/"><img src="IMAGE URL HERE" /></a>
<span class="bottom"><h3>
THIRD HEADING HERE</h3>
DESCRIPTIONS HERE</span>
</li>
<li class="BTT-sliderImage">
<a href="http://www.bloggingtipsandtrix.blogspot.com/"><img src="IMAGE URL HERE" /> </a>
<span class="left"><h3>
FOURTH HEADING HERE</h3>
DESCRIPTIONS HERE</span>
</li>
<div class="clear BTT-sliderImage">
</div>
</ul>
</div>
<br />

Note: Remove the (code in red bolded texts ) jQuery library in the first line of this set of code if you had already added a jQuery library in your template.

Customization

Replace the link "http://www.bloggingtipsandtrix.blogspot.com/"with your own URL.
Change "IMAGE URL HERE"with the URL of your image. See here how to get the image url of the image.
Replace the Italic bold texts "FOURTH HEADING HERE and DESCRIPTIONS HERE" with your heading and descriptions respectively.
If you want to see the appearance of the slider from left and so on , write it at the first span class and the next position as well.
Change the   timeOut: 3000 to your prefered lapse time of the slider to appear. The higher the number the slower it to appear and the lesser the time is the more fast the next image slide  to appear.

How to Add Another Image Slide to the Slider

Simply add the code below above the line <div class="clear BTT-sliderImage">

<li class="BTT-sliderImage">
<a href="http://www.bloggingtipsandtrix.blogspot.com/"><img src="IMAGE URL HERE" /> </a>
<span class="left"><h3>
FOURTH HEADING HERE</h3>
DESCRIPTIONS HERE</span>
</li>

Step 3. Save your work and cheers ;-)

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook