Widget Multi Tab gaya baru untuk Blogger

Ini cocok buanget(halah bahasa alay) buat blogger yang blognya punya template yang lumayan agak sempit (halah lagi dah). Jadi dengan multi tab ini para sahabat blogger bisa memasukkan 3 widget dalam 1 widget, kek kantong ajaib yah. Mungkin blogger-blogger lama sudah pada tau widget ini di masa lalu karena dulu banyak yang menggunakan. Langsung saja lookj kasih dah caranya dan cara ini lookj kutip dari bloggerstop.net.


1. Masuk Ke Blogger lalu cari Edit HTML

2. Centang expand template widget dan temukan </head>

3. Masukkan kode ini di atas kode tadi:

<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STARTS-->
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/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: #fff;
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; //Background color of content area 1 (tab 1)
color:#FFFFFF; //Text color in content area 1 (tab 1)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-2 {
background: #CC9900; //Background color of content area 2 (tab 2)
color:#FFFFFF; //Text color in content area 2 (tab 2)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 {
background: #666666; //Background color of content area 3 (tab 3)
color:#FFFFFF; //Text color in content area 3 (tab 3)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 a {
color:#FFFFFF; //color of HYPERLINKS in content area 3 (tab 3)
}
</style>
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STOPS-HELP-@-http://bloggerstop.net-->

Keterangan : Oprek-oprek warna merah untuk mengubah settingan Tab dan oprek-oprek warna biru untuk mengubah settingan content.

3. Klik Simpan dan sekarang menuju Tata Letak

4. Tambahkan Gadget, pilih HTML/Javascript dan copy paste kode di bawah ini ke dalam form yang disediakan.

<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Best Posts</span></a></li>
<li><a href="#fragment-2"><span>My Pictures</span></a></li>
<li><a href="#fragment-3"><span>Recent Posts</span></a></li>
</ul>
<div id="fragment-1">
<span style="text-align:left;">
<p>First tab is active by default:</p>
</span>
</div>
<div id="fragment-2">
<center><a href="http://tinypic.com" target="_blank"><img src="http://i29.tinypic.com/29ggyu0.jpg" border="0" alt="Image and video hosting by TinyPic"></a></center>
</div>
<div id="fragment-3">
Content of Tab #3
<span ><a href="http://bloggerstop.net" target="_blank">Blogger Widgets</a></span>
</div>
</div>

Keterangan : oprek-oprek warna merah untuk mengubah judul dan oprek-oprek warna biru untuk mengubah kontennya.

Gampang kan? oiya postingan ini lookj ambil aslinya dari http://bloggerstop.net/2009/12/collapsible-multi-tabber-widget-for.html