Membuat Menu Accordion Tanpa Edit HTML

Membuat Menu Accordion Tanpa Edit HTML » The FIM Site kali ini akan sedikit berbagi info mengenai Membuat Menu Accordion Tanpa Edit HTML. Setelah lama saya tidak posting pad The FIM Site dikarenakan saya juga tengah sibuk mengurus blog saya yang satu lagi yakni http://www.masfim.com. Kali ini saya mencoba untuk menshare tutorial yang berguna untuk penambahan widget pada blog Anda. Tutorial ini sendiri saya peroleh dari www.maskolis.com dan jika Anda memiliki sejumlah pertanyaan yang begitu rumit terkait dengan widget yang tidak bisa berjalan bisa bertanya di The FIM Site atau langsung kepembuat tutorial ini.

Karena The FIM Site sendiri adalah situs yang bertujuan untuk menshare apa-apa saja yang sekiranya diperlukan. Oiya catatan kecil yang saya pahami dari widget ini. Menu Accordion ini tidak bisa berjalan jika dalam blog juga menggunakan fitus menu tabber oleh sebab itu saya sarankan untuk memilih salah satu diantara menu tabber dan menu accordion.

Oke langsung saja ke tutorialnya..Untuk Demo bisa dilihat gambar diatas yang saya peroleh dari situs pembuat tutorial ini:

Login ke Blogger dengan akun Anda
Masuk ke Layout, pilih HTML/Javascript
Kemudian masukkan kode berikut ini ke dalamnya (kek bikin masakan aja) :
<style type="text/css"> #accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1R1tFmpLc2YoOYzteRp-F4ji325IuofqwgXr2HzvZgxZdDcJ5ps7Zp1UFJtsN2xiSL7WwVMId1T___VGkE8HlDubf74dYmDyvPt_Rvo6ZxlTw_fl3Z4wQ7qhncFJ0xeCbyxMxNn2_D8/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;} #accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;} #accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;} #accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;} #accordion .content li a:hover {text-decoration:none;color:#000;} #accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIyQu3N8IhmZhzpfNOe-tQfGh6ifR1V3bQj1gXxouAPN0_defXphOU1x4tNFFtwMXCXp2Ty2xJrc0_0ltCvqZPhAc6jTVRWigy1KMG2mH7YPtH2LdO9Cn6-GLBA98CKmgmf7c7AEwqebE/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;} </style> <script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script> <script type='text/javascript'> $(function() { $('#accordion .content').hide(); $('#accordion h2:first').addClass('active').next().slideDown('slow'); $('#accordion h2').click(function() { if($(this).next().is(':hidden')) { $('#accordion h2').removeClass('active').next().slideUp('slow'); $(this).toggleClass('active').next().slideDown('slow'); } }); }); </script> <div id="accordion"> <h2> Title 1</h2> <div class="content"> Isi konten 1 </div> <div id="accordion"> <h2> Title 2</h2> <div class="content"> Isi konten 2 </div> <div id="accordion"> <h2> Title 3</h2> <div class="content"> Isi konten 3 </div> <div id="accordion"> <h2> Title 4</h2> <div class="content"> Isi konten 4 </div> <div id="accordion"> <h2> Title 5</h2> <div class="content"> Isi konten 5 </div> </div> </div> </div> </div> </div>
Terakhir Save, lihat hasilnya

Keterangan :

Title : Judul heading menu accordion
Isi konten : Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget)