another style for recent post using jQuerry

This effect is base on jquerry framework . When you click on More... it will show more recen post for you .
You can check demo here

to make this effect ,go to your blogger account . login . continue to layout ,edit HTML .
Insert this code before </head>

<script type="text/javascript" src="http://contact.dinhquanghuy.googlepages.com/ScriptHandler.js">
<script type="text/javascript" src="http://contact.dinhquanghuy.googlepages.com/jquery-ui-1.js">

<style type="text/css">
*
{
margin:0;
padding:0;
}


#divContainerRight
{
width:300px;
background:#ffffff url(http://i342.photobucket.com/albums/o433/bkprobk/center.jpg) repeat-y top left;
}

#divContainerRightHead
{
width:300px;
background: url(http://i342.photobucket.com/albums/o433/bkprobk/head.gif) no-repeat top left;
}

#divContainerRightFoot
{
width:300px;
height:6px;
background: url(http://i342.photobucket.com/albums/o433/bkprobk/footer.jpg) no-repeat bottom left;
}


#ulrelateArtist
{
list-style-type:disc;
width:270px;
margin:0 auto;
}

#ulrelateArtist li
{

border-bottom:1px dotted #cccccc;
padding-left:5px;
padding-top:10px;
list-style-position:inside;
color:#00A79B;
}

#ulrelateArtist li a
{
color: #009f92;
font-size: 11px;
font-family:Arial;
text-decoration:none;
}

#ulrelateArtist li a:hover
{
color: #009f92;
font-weight: normal;
text-decoration:underline;
}

</style>


Save template .
Create a HTML/javascript widget and paste the code bellow to widget content :

<div style="margin: 0pt auto; width: 300px; padding-top: 5px;">

<div style="padding-bottom: 5px;">
<div id="divContainerRight">
<div id="divContainerRightHead" class="clearfix">
<div style="line-height: 28px; color: rgb(255, 255, 255); padding-left: 10px; font-weight: 900; font-size:12px;">&nbsp;
</div>

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = true;

numposts = 10; // Number of post showed when click "More..."
showposts = 5; // Number of post showed initial

home_page = "http://simplexdesign.blogspot.com/"; //change this to your homepage
label = "blogger"; // change this to label you want to show

</script>

<script src="http://contact.dinhquanghuy.googlepages.com/RP_jQuery-post.js" type="text/javascript"></script>

<div id="ctl00_ContentPlaceHolder1_ucMp3Detail1_ucRelateArtistOnSearch1_divButtonArtistNext" style="margin:0pt auto; width: 270px; text-align: right; cursor: pointer; padding-top: 4px; ">More... <label style="color:rgb(250, 1, 134);">»</label>&nbsp;</div>
</div>
<div id="divContainerRightFoot"></div>
</div>
</div>

this script will show all recent posts .If you want to show recent post of a specific label ,change
<script src="http://contact.dinhquanghuy.googlepages.com/RP_jQuery-post.js" type="text/javascript"></script>

to
<script src="http://contact.dinhquanghuy.googlepages.com/RP_jQuery-label.js" type="text/javascript"></script>

Save template . Ok, we are done.
You can download javascript to customize this code and modify CSS to show this effect as you want .