Ever wanted to add the content slider like mine in your blog? I’ve used Jquery to slide the content of my blog. Follow these easy steps.
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.

/*
Slideshow style rules.
*/
#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

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'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>

7.Now Click on “Save Templates”

8.Now go to Layout–>page elements and Click on ‘Add a Gadget’.

9.Now Select ‘HTML/Javascript’ and add the code given below and click save.

<!-- Slideshow HTML -->
<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<h2>Free Domain Name</h2>
<p><a href="http://youcanhack.blogspot.com"><img alt="Free Domain Name" width="215" src="http://2.bp.blogspot.com/_ar9PeTUrwMY/SnGhdlHYuuI/AAAAAAAAAuU/SEP2BlhGyYs/untitled2222.png" height="145"/></a>CO.CC has become the world's #1 choice for free domains by providing innovative, competitively-priced products, delivering the highest quality customer service, and by always appreciating and listening to its customers!</p>
</div>

<div class="slide">
<h2>Free Web Hosting</h2>
<p><a href="http://youcanhack.blogspot.com"><img alt="Free Web Hosting" width="215" src="http://www.000webhost.com/images/banners/120x120/banner1.gif" height="145"/></a>000webhost.com ($0.00 webhost), is an industry leader in providing top class free web hosting services without advertising! There are no hidden costs, no adverts, and no restrictive terms. Lighting fast speeds, maximum reliability and fanatical user support are just a few of the features you'll receive with our service.</p>
</div>

</div>
</div></div>
<!-- Slideshow HTML -->

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

Hope this was helpful to you. Comment me if you have any questions and requests.