cara cara nak buat recent post,recent comment dan popular post dalam satu.

salam u all .. rinie aerol nak ajar cara nak buat recent post,recent comment dan popular post dalam satu ..mcm kat gambar atas tu.. .okeh.. lau nk ikut jum follow step2 kat bawah..

1.mcm biasa,pergi ke design/click add a gadjet(letak tempat sessuai) dan pilih html/javascript.

2.copy code kat bawah ni .. .

<style>
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {

vertical-align:baseline;
}

#container{
width: 100%;
line-height:12px;
font-size: 12px;
font-family: Arial;
margin:0pt;
cursor:pointer;
overflow: hidden;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a{
text-decoration: none;
}

#container ul{
list-style: none;
list-style-position: outside;
}
#container ul.menu li{
float: left;
margin:0 0px 0 0px;
}

#container ul.menu li{
font-weight: 600;
display: block;
padding: 5px 2px 2px 2px;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinAChj7f7bVPEGh1TdG9pCGxSSCYZsOQmKkcPBZY4BaN1DXhULYeDQxpg91RNN9_A_l6rUf50d19VpsVf6cprYAho0HL3lZuBb3LNoNA5lKzlXxW_lCCNb4AFdT6nJ6eNMfD9_-tlU3Lz0/s320/gradient.png)repeat-x 0 0;
margin-bottom: -1px;
margin-left:2px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#container ul.menu li.active{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;
}
.content{
margin: 0pt auto;
background: #efefef;
background: #e5e5e5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinAChj7f7bVPEGh1TdG9pCGxSSCYZsOQmKkcPBZY4BaN1DXhULYeDQxpg91RNN9_A_l6rUf50d19VpsVf6cprYAho0HL3lZuBb3LNoNA5lKzlXxW_lCCNb4AFdT6nJ6eNMfD9_-tlU3Lz0/s320/gradient.png)repeat-x 0 0;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.content h1{
line-height: 1em;
vertical-align: middle;
height: 26px;
padding: 10px 10px 10px 35px;
font-size: 15px;
}
.content.news h1{
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5X60loDZI-Zmj6_1eGGc3sidWzbSxJrVuuCyALi2Ful5F45VUKbisX1ufMwN5G3a4KbeuagsEgRd29Xys_eWBD-NNCKg756zzTwQw-fj2HOxTQd5E5co0VqMiNBl1zcJXZICithNB9H8/s320/favorite.png) no-repeat scroll left top;
}
.content.news{
display: block;
font-size: 11px;
color: #000000;
text-align: justify;
}
.content.news a{
font-size: 11px;
color: #5f95ef;
text-align:left;
padding: 0 0 0 0px;
}
.content.tutorials h1{
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZYVysNuGFAQrLcrRcT5jnPa1ld3cOO_u0u63_xOb4CeddkThIwU9y-BBZlfAW51mQhrM_oXyWN3hrlkER76ZV4qWyEGJXIRH5RmwUS-pm5ZpH_DQBU8d5I18Gsvjdu_aus-JNrKouD_Q/s320/heart.png) no-repeat scroll left top;
}
.content.tutorials{
display: none;
color: #000000;
text-align: justify;
}
.content.tutorials a{
color: #5f95ef;
text-align: left;
padding: 0 0 0 0px;
}
.content.links h1{
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0XG-v1CbqGS4ljEUCFWWD3jsfIB4-s8Y9B8WxsdhkPV_A0p_wFc7ZsLk6OD3-8AUQpKKZpxAZtTcsmG_5HgYuo1IUawr6Xc3wwAvUVUxinSoTqZQyXDXxf6l5bEaS_S204D2nA_8YE-Q/s320/comment.png) no-repeat scroll left top;
}
.content.links{
display: none;
color: #000000;
font-size: 11px;
text-align: justify;
}
.content.links a{
color: #5f95ef;
text-align: left;
}
</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/javascript10/tabs.js"></script>

<div id="container">

<ul class="menu">
<li id="news" class="active">Recent</li>
<li id="tutorials">Popular</li>
<li id="links">Comments</li>
</ul>
<span class="clear"></span>
<div class="content news">

<h1>Recent Posts</h1>
<ul>
<script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswidgetv1.js'></script><script style='text/javascript'>var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script><script src='http://aerol-rianbow.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
</ul>
</div>

<div class="content tutorials">
<h1>Popular Posts</h1>
<ul>
<script language='javascript'>
aBold = false;
numposts=1000;
maxshowresult=5;
home_page = "http://aerol-rianbow.blogspot.com/";
</script>
<script src='http://sites.google.com/site/testingsahaja/toppost.js' type='text/javascript'></script>
</ul>
</div>

<div class="content links">
<h1>Recent Comments</h1>
<ul>
<script style="text/javascript" src="http://sites.google.com/site/testingsahaja/recentcomments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = 40;</script><script src="http://aerol-rianbow.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>
</div>
</div><em>Design By<a href=http://aerol-rianbow.blogspot.com/
</div></center>target="_blank">Rianbow</a></em></div>