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. See first the live DEMO.
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 sure to 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.mybloggersnipers.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.mybloggersnipers.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.mybloggersnipers.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.mybloggersnipers.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 ;-)
GOOD DAY EVERYONE!
