Cara Membuat Menu Tab Accordion

Cara Membuat Menu Tab Accordion - Bentuk menu accordion ini sangat menarik, dan sangat cocok untuk di pasang di blog sobat. Karena tab ini menggunakan animasi sliding. Dan juga cara pemasangannya cukup mudah.... Bagi sobat blogger yang berminat memasang Menu Tab Accordion bisa mengikuti langkah-langkah di bawah ini.


1. Login ke akun blogger sobat.
2. Klik Rancangan > Add Widget > HTML/Javascript
3. Lalu Copy Paste script di bawah ini
 <style type="text/css"> h5 { font-family: trebuchet-ms, arial, tahoma; font-size: 13px; padding: 0 0 1em; font-weight:bold; color: #ffffff; } .msg_list { list-style: none; margin: 0; padding: 0; width: 100%; } .msg_head { padding: 5px 10px; cursor: pointer; position: relative; background-color:#0e0e0e; margin:1px; } .msg_body { padding: 5px 10px 15px; background-color:#F4F4F8; } </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").mousedown(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"> JUDUL TAB</h5> <div class="msg_body"> ISI TAB MENU </div> <h5 class="msg_head"> JUDUL TAB</h5> <div class="msg_body"> ISI TAB MENU </div> <h5 class="msg_head"> JUDUL TAB</h5> <div class="msg_body"> ISI TAB MENU </div> <h5 class="msg_head"> JUDUL TAB</h5> <div class="msg_body"> ISI TAB MENU </div> </div> <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").mousedown(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"> JUDUL TAB</h5> <div class="msg_body"> ISI TAB MENU </div> <h5 class="msg_head"> JUDUL TAB</h5> <div class="msg_body"> ISI TAB MENU </div> <h5 class="msg_head"> JUDUL TAB</h5> <div class="msg_body"> ISI TAB MENU </div> <h5 class="msg_head"> JUDUL TAB</h5> <div class="msg_body"> ISI TAB MENU </div> </div>