Note: The tutorial is shown with the New Blogger Interface. Check the new interface here.

Step1: Login to your blogger account by visiting http://draft.blogger.com/

Step2: From the drop down menu go to Template and scroll down at the bottom to Edit HTML.

Step3: Search for ]]</b:skin> and add the following CSS just above it.

.box_skitter .box_clone {position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20;}
.box_skitter .box_clone img {position:absolute;top:0;left:0;z-index:20;}

.box_skitter .prev_button {position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(http://3.bp.blogspot.com/-_jt7Vtp3obE/ThQHetpTTBI/AAAAAAAABRA/tlKhtvhZurk/s1600/prev.png) no-repeat left top;}
.box_skitter .next_button {position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(http://1.bp.blogspot.com/-zJ4s1pUP_uQ/ThQHd8xo7rI/AAAAAAAABQ8/fPAdQpIONm8/s1600/next.png) no-repeat left top;}

.box_skitter .info_slide {position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;}
.box_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.box_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;}

.box_skitter .container_thumbs {position:relative;overflow:hidden;height:50px;}
.box_skitter .info_slide_thumb {-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}
.box_skitter .info_slide_thumb .image_number {overflow:hidden;width:70px;height:40px;position:relative;}
.box_skitter .info_slide_thumb .image_number img {position:absolute;top:-50px;left:-50px}

.box_skitter .box_scroll_thumbs {padding:0 10px;}
.box_skitter .box_scroll_thumbs .scroll_thumbs {position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}

.box_skitter .info_slide_dots {position:absolute;bottom:-40px;z-index:100;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.box_skitter .info_slide_dots .image_number {background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
.box_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;}

.box_skitter .label_skitter {z-index:150;position:absolute;bottom:0px;left:0px;display:none;opacity:0.9; background:#000;padding:2px 10px;margin:0 5px 0 0;}

.loading {position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(http://2.bp.blogspot.com/-jOnDqsbXNMo/ThQHUOhk_2I/AAAAAAAABQg/BRmMmWIaTNI/s1600/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}

.box_skitter_large {width:800px;height:200px;}
.box_skitter_small {width:200px;height:200px;}

Step4: Go to Layout from the left sidebar. And add an HTML Gadget above the Blog Post section. And copy paste the following code.

<script type=’text/javascript’>
$(document).ready(function(){
$(‘.box_skitter_large’).css({‘width’: 530, ‘height’: 250});
$(‘.box_skitter_large’).skitter({animation: “randomSmart”});
// Highlight
$(‘pre.code’).highlight({source:1, zebra:1, indent:’space’, list:’ol’});
});
</script>

<div class=”box_skitter box_skitter_large”>
<ul>
<li>
<a href=”http://www.iblognet.com“><img src=”http://dl.dropbox.com/u/23364774/thiagosf-SkitterSlideshow-f9b0d10/images/001.jpg” class=”block” /></a>
<div class=”label_text”>
<p><a href=”http://www.iblognet.com“>iBlognet | For Internet Lovers and Tech Geeks</a></p>
</div>
</li>
<li>
<a href=”YOUR ARTICLE LINK“><img src=”YOUR ARTICLE IMAGE” class=”cube” /></a>
<div class=”label_text”>
<p><a href=”YOUR ARTICLE LINK“>ARTICLE TITLE</a></p>
</div>
</li>
<li>
<a href=”YOUR ARTICLE LINK“><img src=”YOUR ARTICLE IMAGE” class=”default” /></a>
<div class=”label_text”>
<p><a href=”YOUR ARTICLE LINK“>ARTICLE TITLE</a></p>
</div>
</li>

<li>
<a href=”YOUR ARTICLE LINK“><img src=”YOUR ARTICLE IMAGE” class=”default” /></a>
<div class=”label_text”>
<p><a href=”YOUR ARTICLE LINK“>ARTICLE TITLE</a></p>
</div>
</li>

<li>
<a href=”YOUR ARTICLE LINK“><img src=”YOUR ARTICLE IMAGE” class=”default” /></a>
<div class=”label_text”>
<p><a href=”YOUR ARTICLE LINK“>ARTICLE TITLE</a></p>
</div>
</li>

<li>
<a href=”YOUR ARTICLE LINK“><img src=”YOUR ARTICLE IMAGE” class=”default” /></a>
<div class=”label_text”>
<p><a href=”YOUR ARTICLE LINK“>ARTICLE TITLE</a></p>
</div>
</li>

</ul>
</div>

If you need to change the dimension of the slider, change the following from above:
$(‘.box_skitter_large’).css({‘width’: 530, ‘height’: 250});
Just add the appropriate links, images and Title as mentioned and Save the gadget.
You can add as many as slides you want. And each will have different transition effect.
That’s it!! View the slider in action on your blog.
Demo | Source | WordPress Plugin