Cara Membuat Smart Multy Tab Widget

Sebenarnya widget ini kurang lebih sama dengan tab widget yang lain. Bedanya pada tampilannya yang hitam dan lebih menarik. Disamping itu anda tidak perlu repot lagi memasukkan kode Daftar Isi, Popular Post Berdasarkan Komentar, dan Recent Comment, karena saya sudah melengkapinya. Anda hanya perlu mengganti alamat blog saya dengan alamat blog anda. Sekarang ikuti langkah pembuatannya.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-multytab.js' type='text/javascript'></script>
<style type='text/css'>
.btabs{padding:3px 0;margin-left:10px;margin-top:1px;margin-bottom:0;font-family:&#39;Lucida Grande&#39;,&#39;Lucida Sans Unicode&#39;,Sans-serif;font-size:1.1em;list-style-type:none;text-align:left}
#tabbody{width:98%;margin-left:10px;padding:10px 4px;background-color:#1a1a1a;color:#fff;border:1px solid #1a1a1a;margin-top:2px}
.btabs li{display:inline;margin:0}
.btabs li a{text-decoration:none;position:relative;z-index:1;padding:5px 7px;background-color:#828282;border:none;color:#fff;margin-right:-2px;outline: none;}
.btabs li a:visited{color:#fff;}
.btabs li a:hover{text-decoration:none;color:#fff;background-color:#545454}
.btabs li a.selected{color:#c7c7c7;position:relative;top:0}
.btabs li a.selected{background-color:#1a1a1a;color:#fff}
.btabs li a.selected:hover{background-color:#1a1a1a;text-decoration:none}
.tabcontent .sb_comment_author{color:#696969;font-size:10px;}
.tabcontent li{color:#b7b7b7;display:block;padding:5px 6px;border-bottom:1px solid #111;border-top:1px solid #222}
.tabcontent li:hover{}
.tabcontent li a{color:#CDCDCD;text-decoration:none;font-size:11px;outline: none;}
.tabcontent li a:hover{color:#27d;text-decoration:underline}
.tabcontent{display:block;}
.tabcontent{display:none;}
.tabcontent{display:block;}
.tabcontentstyle{border:1px solid gray;width:450px;margin-bottom:1em;padding:10px}
.tabcontent{display:none}
.tabcontent{display:block;}
</style>

Klik Simpan Template
Selanjutnya Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan kode berikut ke dalamnya

<ul id="sidebartabs" class="btabs">
<li><a href="#" class="selected" rel="tab1">Daftar Isi</a></li>
<li><a href="#" rel="tab2">Popular Post</a></li>
<li><a href="#" rel="tab3">Komentar</a></li>
</ul>

<div style="width: 100%; height: 300px; overflow: auto;">
<div id="tabbody">
<div id="tab1" class="tabcontent">
<ul>
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</ul>
</div>

<div id="tab2" class="tabcontent">
<ul>
<!-- Popular posts with comment count Start -->
<ul>
<script type="text/javascript">
function getYpipePP(feed) {
 document.write('<ol style="">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " (" + feed.value.items[i].commentcount + ")";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment);
 document.write('</a></li>');
 }
 document.write('</ol>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://blogonol.blogspot.com
 &ShowHowMany=10
 &_id=390e906036f48772b2ed4b5d837af4cd
 &_callback=getYpipePP
 &_render=json"
type="text/javascript"></script>
</ul>
<!-- Popular posts with comment count End -->
</ul>
</div>

<div id="tab3" class="tabcontent">
<ul>
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/blogonol-comment.js"></script><script style="text/javascript">var numcomments = 20;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://blogonol.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>
</div>
</div>

<script type="text/javascript">
var countries=new ddtabcontent("sidebartabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</div>

Ganti blogonol pada script ke dua di atas dengan alamat blog anda
Selanjutnya Simpan dan lihat hasilnya
Selamat Mencoba dan Sukses Selalu

"keep spirits and do the best"