Membuat Tab View According dengan Jquery

Tab View, merupakan sebuah widget yang dapat digunakan untuk menghemat tempat pada blog agar kelihatan lebih ringkas dan rapi, berbeda dengan Multi Tab, Tab View According menggunakan gaya slide kebawah untuk membuka lembar gadget, dengan efek Jquery, sehingga berkesan dinamis.
Pada posting kali ini saya akan memberikan cara untuk membuat Tab View According dengan efek Jquery, untuk cara kerjanya adalah tab akan membuka jika judul tab tersentuh oleh Cursor, berikut langkah membuat Tab View According :

1. Log in ke Blogger.
2. Pilih Rancangan, kemudian Elemen Laman.
3. Klik Tambah Gadget, dan pilh HTML/Javascript.
4. Masukan script berikut :

<style type="text/css">
h5 {
font-family:Verdana;
font-weight:bold;
text-transform:uppercase;
font-size: 13px;
padding: 0 0 1em;
color: #b2b2b2;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 7px 8px;
cursor: pointer;
position: relative;
-moz-border-radius-topright: 11px;
-webkit-border-top-right-radius: 11px;
border-top-right-radius;11px;
-moz-border-radius-bottomright: 11px;
-webkit-border-bottom-right-radius: 11px;
border-bottom-right-radius;11px;
background : url (http://xxxxxx/FWgOHLBMKL0/s1600/sidebar-tab.png);
margin:1px;
}
.msg_body {
padding: 0px 0px 15px;
background-color:transparent;
}
</style>

<script type="text/javascript" src="http://javscript-code.googlecode.com/files/menuaccordion.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tab 1</h5>
<div class="msg_body">

......
</div>


<h5 class="msg_head">Tab 2</h5>
<div class="msg_body">

......
</div>
<h5 class="msg_head">Tab 3</h5>
<div class="msg_body">

.......
</div>

</div>

5. Edit script sesuai kebutuhan, tambahkan script gadget lain untuk memasangnya pada Tab View.
6. Untuk Background Tab, dapat menggunakan gambar / kode warna.
7. Kemudian Simpan.
Semoga Berhasil !!!