Cara Memasang Profesional Multi Tabs Widget

Masih kebingungan mencari tutorial cara membuat multi tabs widget ? Apakah di benak anda masih ada sebuah pertanyaan mengenai cara membuat multi tabs widget ? Multi tabs widget memang banyak diminati oleh para blogger dan ingin terlihat lebih profesional seperti blog yang di buat di wordpress. Sebelum anda memutuskan untuk membuat multi tabs widget di blog anda sebaiknya anda perhitungkan baik dan buruknya multi tabs widget tersebut bagi blog anda.

Kebaikan menggunakan Multi tabs widget ini adalah bisa menghemat space yang ada di halaman blog anda. Kekurangannya adalah kecepatan loading blog kita akan sedikit berkurang karena ada penambahan Javascript di template kita. Namun jika anda sudah mempunyai tekad yang bulat untuk tetap memasangnya diblog anda langsung aja ikuti tutorial berikut ini : 

• Login ke akun Blogger anda > Design > Edit HTML

Cari kode berikut ini

</head>

Setelah ketemu, Copy dan Paste kode dibawah ini tepat diatas kode tersebut / letakkan sebelum kode tersebut, kemudian simpan template anda.

<!--Multi-Tabs-Widget-->
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://dataklobotcom.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://dataklobotcom.googlecode.com/files/ui.core.js"></script>
<script type="text/javascript" src="http://dataklobotcom.googlecode.com/files/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });
</script>
<style>

.ui-tabs-selected a {

background-color: #e17e09;

color: #000;

font-weight: bold;

padding: 2px 8px 1px;

border-bottom: 1px solid #fff;

border-left: 1px solid gray;

border-right: 1px solid gray;

margin-bottom: -1px;

overflow: visible;

}

#fragment-1 {

background: #999900; //Warna Background pada content area 1 (tab 1)

color:#FFFFFF; //Warna Text atau tulisan pada content area 1 (tab 1)

margin-top:2px;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

}

#fragment-2 {

background: #CC9900; //Warna Background pada content area 2 (tab 2)

color:#FFFFFF; //Warna Text atau tulisan pada content area 2 (tab 2)

margin-top:2px;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

}

#fragment-3 {

background: #666666; //Warna background pada content area 3 (tab 3)

color:#FFFFFF; //Warna Text atau tulisan pada content area 3 (tab 3)

margin-top:2px;  

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

}

• Selanjutnya silahkan anda menuju Design > Page Elements > Add a Gadget di sidebar anda > Pilih HTML/Javascripts. Copy dan Paste Kode di bawah ini > SAVE

<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Popular</span></a></li>
<li><a href="#fragment-2"><span>Comments</span></a></li>
<li><a href="#fragment-3"><span>Archive</span></a></li>
</ul>
<div id="fragment-1">

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=28a6afad7c6ba1288c1b738277e42385&url=http%3A%2F%2Fklobot.com&num=5" type="text/javascript"></script>
</div>
<div id="fragment-2">

<script style='text/javascript' src='http://dataklobotcom.googlecode.com/files/recent_comments.js'></script><script style='text/javascript'>var a_rc=5;var m_rc=true;var n_rc=true;var o_rc=100;</script><script src='http://klobot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments'></script>
<br/><span style="font-size: x-small;">
</span></div>
<div id="fragment-3">
<div style="overflow:auto; border: 1px solid #151515; margin: auto; padding: 3px; width: 100%; height: 300px; background-color: #fffff; text-align: left;">
<script style="text/javascript" src=" http://dataklobotcom.googlecode.com/files/daftar%20isi%20blog.js.txt"></script>
<script src="http://www.klobot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
</div>
</div>

Ganti nama blog kami ( yang bercetak tebal berwarna merah ) dengan nama blog anda. Sekarang blog anda sudah terpasang Multi tabs widget seperti punya kami.