Tutorial : Cara nak buat Multi tab view (recent post, popular post dan komen)

Bagi korang yang berhajat nak mengurangkan space blog korang, bolehlah guna cara ni iaitu buat multi tab view. Langkah2nya ialah seperti berikut...jom terjah...

1. Pergi Dashboard > design > add a gadget > HTML/javascript

2. Masukkan code berikut:

<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/AVvXsEg_k4_mEjRkXBHp2uK0qo9LmyZFdtl50BWP6e664ibXfwoWEoGgRyy9Nr9zuZwSKAaH4BtYBwu9MDzDBhSrWOhGjTGZ-ROemdFAeqGTgMM58X7KTuDzsJNqB_LIWDptxneTsp7PcV7t-tRT/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/AVvXsEg_k4_mEjRkXBHp2uK0qo9LmyZFdtl50BWP6e664ibXfwoWEoGgRyy9Nr9zuZwSKAaH4BtYBwu9MDzDBhSrWOhGjTGZ-ROemdFAeqGTgMM58X7KTuDzsJNqB_LIWDptxneTsp7PcV7t-tRT/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/AVvXsEhfH5IMA3MuFzPsgrhCd88D-2xwvX80XjdejXGDK8DKQ2jMJklQqdQpZoqCGEKAJNCsZ8YumozZGnUFDrMqKZgcc1a1GxZbGYMgCPwofLrBsTMqG836a8I5LMVcQa49i9_z9dmwfNoltQ8/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/AVvXsEgryALpMWQDyXNMHvnSVoXWL8MSx7kd-S62m72jSpauJxHKkqaoV6ecjRrIYf-nSOxBqgjUxiFdyIVVjz-2gEE9Moz2b-IWasc14ooAwR6CBhA6GZNYR6zqNXcaZM1tShj4HAJsub2c-rs/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/AVvXsEi6b2YKaNoWN1018Dr4nVngJ7_Ae8c3JFq5IjUJf23LUTwep_tNwpe7WnWmaJ0wGpZXTTgKFTLJ59VpLgU9OjaEuiIujGq1gvf9ypgAG26DJI7WoaT2zFh6r_0NNKsyIunfacjPCcjYm3o/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://easy-xs.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://easy-xs.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>
</div>
</div><em>Design By<a href=http://easy-xs.blogspot.com
</div></center>target="_blank">Rianbow</a></em></div>

3. Kat perkataan warna merah tu tukarkan dengan korang punyer blog URL.

4. Save dan lihatlah hasilnya.

Note : Kalau korang gunakan sistem komen dari intensedebate, komen korang tak akan keluar dan popular post adalah berdasarkan jumlah komen post korang.