How to add Jquery Image Slide Show for blogger

How to add Jquery Image Slide Show for blogger 


1. Log in to your blogger and Go to Design >Page element

2. Now click 'Add a Gadget' and select 'HTML/Javascript'

3.Past below code.

<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="Slide-Image-Address" /> 
<span class="right"><h3>Title-of-pic</h3>Slide Description [...] </span> 
</li>
<li class="MBT-sliderImage"> 
<img src="Slide-Image-Address 2" /> 
<span class="left"><h3>Title-of-pic 2</h3>Slide  Description [...] </span> 
</li>

<li class="MBT-sliderImage"> 
<img src="Slide-Image-Address 3" /> 
<span class="top"><h3>Title-of-pic-3</h3>Slide Description [...] </span>
</li> 
<li class="MBT-sliderImage"> 
<img src="Slide-Image-Address 4" /> 
<span class="bottom"><h3>Title-of-pic 4</h3>Slide  Description [...] </span> 
</li>

<li class="MBT-sliderImage"> 
<img src="Slide-Image-Address 5" /> 
<span class="bottom"><h3>Title-of-pic-5</h3>Slide  Description [...] </span>
</li> 
<div class="clear MBT-sliderImage"></div> 
</ul> 
</div>
<br/>

4. Now replace Slide-Image-Address   Title-of-pic-3  Slide Description [...] with your slide content.

5. After click save you are done.