Cara Membuat Tab View According dengan Jquery

Kali ini Saya akan memberitahu cara membuat menu 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 cara membuat Tab View According : 
• Log in ke blogger.com 
• Pilih Tata Letak → Tambah Gadget → pilih HTML/JavaScript 
• Masukan script di bawah ini ↓

<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>...... </div><h5 class="msg_head">Tab 3</h5><div class="msg_body">....... </div></div>

• Edit script sesuai kebutuhan, tambahkan script gadget lain untuk memasangnya pada Tab View. 
• Untuk Background Tab, dapat menggunakan gambar / kode warna. 
• Simpan dan lihat hasilnya 

Selamat Mencoba !