Actually I have been receiving a lot
of questions from my readers about the easiest way to install blogger slider in
your blog. Actually most of the solutions that are available online they
involves playing around with the XML codes in which most of the people they don’t
like. The following codes will help you to create impressive blogger slider.
You just have to
follow these simple steps. Please make sure you download your template before
starting doing this. You just have to
blogger, add widget then selecet HTML/JavaScript widget and paste the following
codes and that’s it you are done no need to temper
with the XML codes. You can replace the links with your links and the images with
your own images. To see the slider in action visit my recent work www.edgarkibwana.blogspot.com
Codes:
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script
type="text/javascript"
src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script
type="text/javascript">
$(document).ready(function() {
$('#MBT-slider').s3Slider({
timeOut: 3000
});
});
</script>
<style>
#MBT-slider {
width: 590px; /* Keep it 20px-40PX greater
than ACTUAL Image size */
height: 335px;
position: relative;
overflow: hidden;
margin-left: 0;
}
#MBT-sliderContent {
width: 590px;
position: absolute;
top: 0;
margin-left: 0;
}
.MBT-sliderImage {
float: left;
position: relative;
display: none; top: 0;
border:1px solid #ddd;
}
.MBT-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;
}
.MBT-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
clear: both;
}
.top {
top: 0;
left: 0;
width: 570px !important;
height: 70px;
}
.bottom {
bottom: 0;
left: 0;
width: 570px !important;
height:90px;
}
.left {
left: 0;
top: 0;
width: 110px !important;
height: 335px;
}
.right {
right: 0;
bottom: 0;
width: 80px !important;
height: 319px;
}
</style>
<div
id="MBT-slider">
<ul id="MBT-sliderContent">
<li
class="MBT-sliderImage">
<img
src="http://football-talk.co.uk/wp-content/uploads/2011/01/theowalcott_270846.jpg"
/>
<span
class="right"><h3>KIU YA MAKOMBE KUISHA
ARSENAL?</h3></span>
</li>
<li
class="MBT-sliderImage">
<img src="http://www.hidaha.com/wp-content/uploads/2010/03/Serie-A.jpg"
/>
<span
class="left"><h3>SUPERCOPPA ITALIANA</h3></span>
</li>
<li
class="MBT-sliderImage">
<img
src="http://www.sport.co.uk/public/images_news/400x400_AlexandrePatoNew.jpg"
/>
<span
class="top"><h3>UWEKEZAJI MPYA AC
MILAN</h3></span>
</li>
<li
class="MBT-sliderImage">
<img
src="http://l.yimg.com/fv/xp/afp/20120809/04/3967820322.jpg?x=400&sig=VLDXicY3S0DuTpotnTTqwQ--"
/>
<span
class="bottom"><h3>LUCAS MOURA MASLAHI
MBELE</h3></span>
</li>
<li class="MBT-sliderImage">
<img
src="http://goonersaur.com/wp-content/uploads/2012/07/Arsenal-3D.gif"
/>
<span
class="bottom"><h3>ARSENAL NA UKATA WA
MAKOMBE</h3></span>
</li>
</ul>
</div>
<br/>