How To Add jQuery Slide Show to blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Don't Click on "Expand Widget Templates"

3.Scroll down to where you see ]]></b:skin> tag:

4.Copy below code and paste it just before the ]]></b:skin> tag.

/* s3Slider jQuery plugin */
#s3slider {
border:5px solid #000;
width:250px; /* important to be same as image width */
height:190px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
margin: 0px; padding:0px;
width:250px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
text-indent: 0px; /* reset blogger */
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px; /* need edit to be same as image width or wider */
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: block; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin s3Slider jQuery plugin -->
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

7.Now Click on "Save Templates"

8.Now go to Layout-->page elements and click on 'add a gadget'.

9.Now select html/java script.Add the code given below and click save.

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://www.000webhost.com/173265.html" target="_blank" rel="nofollow"><img border="0" alt="Free Website Hosting" width="250" src="http://www.000webhost.com/images/banners/120x120/banner1.gif" height="190"/></a>
<span>Free Website Hosting</span>
</li>
<li class="s3sliderImage">
<a href="http://tinyurl.com/nlqnby" target="_blank" rel="nofollow"><img border="0" alt="Free Domain name" width="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij36at09TrSNWo7iunCz2LfaygBQ8BwvQluLmI-d4oX05CYD3l3XE-tAKhCSVgTcDO0hgC0QBpLa-FW8krEQ9x9lqpzUIO7goNvG7PRNkuaiWxpG2gxIFthhEPcfIKrnJRyFZ1AFrjlnc/" height="190"/></a>
<span>Get Free Domain</span>
</li>
<li class="s3sliderImage">
<a href="http://revtwt.com/index.php?id=18676" target="_blank" rel="nofollow"><img width="250" height="190" src="http://revtwt.com/images/TwtAd_referral02.jpg"/></a>
<span>Earn money from twitter</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Note : Remember to replace blue colour code with your content.

Now you are done.