You might have seen different type of Recent post widgets showing Thumbnail with text or only text or only thumbnail. Those all widgets will show recent posts one by one in horizontal manner or vertical manner but will show all the posts. Here is a little different one which will show recent posts in a drop down manner as shown in top picture.

If you want to experience this, go to Info blog and check right side bar for the label Templates I designed.

NOTE: Please use firefox to experience this as this widget has some bug for IE with personal domain. If yyou dont use personal domain as i am using and if u have a blog address as xxxxx.blogspot.com then it will work perfectly on all browsers.

To insert this widget into ur blog follow the steps below

1) Log into ur blog and paste below code just before "]]></b:skin>"

.accordion {
float:left;
width: 260px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h4 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin:0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border-top: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h4:hover {
background-color: #e3e2e2;
}
.accordion h4.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
}

2) Now just copy and paste below code just before </head>

<script type='text/javascript'>
$(document).ready(function(){

$(".accordion h4:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h4").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h4").removeClass("active");
});

});
</script>

3) Not last and final step. copy and paste below code at the place where u want to show ur widget.

<script language='JavaScript'>

imgr = new Array();
imgr[0] = 
"http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
jimgwidth = 220;
jimgheight = 120;
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;
jtext = "Comments";
jshowPostDate = true;
sumtitle = 25;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
numposts = 6;
label = "Blogger";
home_page = "http://ngsk.info/";

</script>
<div class='accordion'>

<script src='http://contact.dinhquanghuy.googlepages.com/j-label-fix.js' type='text/javascript'/>

</div>
 

Now change home_page url to ur blog address and label name to ur tag name.

hope u like this widget.