Cara Membuat Menu Accordion Tanpa Edit HTML

Kali ini saya akan memberikan tutorial membuat menu accordion, Salah satu fungsi dari accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tabber atau tab view, jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah agak lama, saya hanya memperbaharui tampilan menunya saja. Anda bisa letakkan menu accordion ini pada sidebar blog.
Bagi teman-teman yang mau mencoba, berikut ini cara membuatnya  :

1. Login ke Blogger dengan akun Anda
2. Masuk ke Layout, pilih HTML/Javascript
3. Kemudian masukkan kode berikut ini ke dalamnya
   
   
   
   <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/AVvXsEhcVdxyb7LhZaYzBNAVVga8nX9_KCC4kFfgkPevzMMpxFZzRYYdz8gCutmfQnGrwQzRatyOYScU117rDuqwIH9ORsZoKIfy1N8jLPX1o1mzBypHrkk-RSSVKZNbia0kxuuca05r74hMrew/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/AVvXsEiljJL_BoV_1mav_gbkY-b_WElGjyoASbxmeEJ6fhdU8FGTIhneTmCZMIhrcMZcxNTG_sl4D4xU3c1gvPpRvno62IvUHlhwpsr_8TnrDaVr_BZlbOdHC6RE1PVRfq00rJsz5J58f0m5E3I/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>
   klik select all text untuk block teks dan Ctrl +C untuk copy
   
   
4. Terakhir Save, lihat hasilnya 

Sekian Tutorial Cara Membuat Menu Accordion Tanpa Edit HTML Trimakasih sudah berkunjuang 

~ Menu Accordion
~ Menu Accordion Tanpa Edit HTML
~ Cara Membuat Menu Accordion Tanpa Edit HTML
~ Membuat Menu Accordion
~ Accordion Tanpa HTML

~ Niki Stasya

Sumber : maskolis