How Add Cool Jquery Slide Show For Blogger Part 3

This is also cool slide show to your blog.Follow instruction
to add it to your blog.

Demo here

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </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>

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code before  ]]></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;
}

6. Now Go to Design >>page Element

7.Click Add gadget  and Select HTML/JavaScript 

8. Now paste paste below code

<!-- Slideshow HTML by www.wierdwalker.blogspot.com -->
<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<h2>Thor (2011)</h2><p><a href="http://tinyurl.com/nlqnby"><img alt="Thor (2011)" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfeAR624xiDrbCvrQcTpiQS-G24cgr-3PZzP8uKuu4YZzXaO_HQaEmbrA4xGlGqHx0jJ16X70i-5V_tyztxkirIGa6Dfhr85sXfxiU9QmgjCDV0nqO_qD1jbFZN_gJTjTgl0TCvc0X2uE0/s320/Thor+2011.jpg" height="145"/></a>The powerful but arrogant warrior Thor is cast out of the fantastic realm of Asgard and sent to live amongst humans on Earth, where he soon becomes one of their finest defenders. </p>
</div>

<div class="slide">
<h2>Sucker Punch</h2>

<p><a href="#"><img alt="Sucker Punch" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVI_ebusc9WVqYuKgTS0-zHgifxiTpnvvBxJVy9VAJ2B0ctfJz6GotjR1osa94HWyA7FQiAVHc3RbNAn7_sgHtMsAVXUEESahgPIiVIeuM244X6bYzzZl7nl914MwHcUXcHeNnCVTF3DL7/s320/Sucker+Punch.png" height="145"/></a>Sucker Punch is a 2011 action-fantasy thriller musical film about the fantasies of a young woman who is committed to a mental institution. It was written by Steve Shibuya and Zack Snyder and directed by Snyder</p></div>



<div class="slide">
<h2>crysis2</h2><p><a href="#"><img alt="crysis2" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqxtK8G6ugh2zpho3jUZnpVKY2FFptV21ZiHPfIh_WHhdPlo_cYdp5mYQi6hVAl4qQ0PO9jzABjJPrw1NbkbKjeSPSv0KJZkVVLGRzMd2blkphYBLIfNBjSqhlh7hQTYwe7aP3afBcpDEe/s320/crysis2.png" height="145"/></a>Crysis 2 is a first-person shooter video game developed by Crytek, published by Electronic Arts and released in North America, Australia, and Europe in March 2011 for Microsoft Windows, PlayStation 3, and Xbox 360. Officially announced on June 1, 2009, the game is the second main installment of the Crysis series, and is the sequel to the 2007 video game Crysis and Crysis Warhead.[3</p></div>

<div class="slide">
<h2>Pirates of the Caribbean 4</h2><p><a href="#"><img alt="Pirates of the Caribbean 4" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgBdVdCgFuyhk7-ufjMGd-HVyR5LlY2G4FOCam2eVS19mBmVfMC6zutJPgils5ecBv0fsOQQ9hyphenhyphen_-19hWMMbZPJv5sqnhJuGCtbOxJ31PKUgxAJ58JUTs2GxKqSi3ViSz88Tcx4GT6f2c0/s320/Pirates+of+the+Caribbean.png" height="145"/></a>aptain Jack Sparrow (Depp) crosses paths with a woman from his past (Cruz), and he's not sure if it's love -- or if she's a ruthless con artist who's using him to find the fabled Fountain of Youth. When she forces him aboard the Queen Anne's Revenge, the ship of the formidable pirate Blackbeard (McShane)</p></div>
</div>
</div></div>
<!-- Slideshow HTML -->

Replace # your URL
you can replace description and image URL with your own.

9. Now save  'HTML/JavaScript' 
You are done.