Cara Membuat Menu Accordion Di Sidebar Blog

Terlalu banyak memiliki widget di sidebar tentunya akan semakin sulit untuk menjaga kerapihan dari widget-widget tersebut, selain itu sidebar kita akan panjang/tinggi menjulang sehingga membuat blog semakin panjang di monitor pengunjung sehingga harus menscroll blog lebih jauh.


Read More : Berbagai macam Back To Top


Kali ini saya akan menjelaskan tutorial membuat menu accordion  yang telah diposting di blog http://tutornesia.blogspot.com/ milik Leoni Li.Widget ini memiliki fungsi agar blog anda terlihat lebih rapi dengan memasukkan widget yang setema dalam satu kolom dan widget yang berbeda temanya di kolom yang berbeda, tentu saja widget ini bisa membuat tampilan sidebar blog anda bisa lebih rapi dan meringkas panjang blog anda.

Demo B-N

cara pemasangan

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih tata letak
• Step 3  Pilih tambahkan widget lalu HTML/Javascript
• Step 4  Copy kode berikut lalu pastekan di dalam kolom  HTML/Javascript tadi

<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/AVvXsEgacHO3rOcsYad08S8dogEDvgnZ2LNp04ukiCwDAmJwwGrfElnKwDVB9enmsAdBicbmh9QBtj4eyzvVnu8KO2fskpnGr8XDmCIEIiFKBGHwglS7AkJRUmffIHZFNE95tiwMA794Sec0vYg/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/AVvXsEhPjSn2TrJo4L27jDMya6Rv6SPVcYGT9AL7nUR89y7k4_U_QCv1oTEn3aXRazhBcQ6TkU7U0mcT_K0bgvea8NJRZNLWSUD9Rr2d17nzUJiRA80MiqMnOS7_zYQnyNQuALlC2UONcEbZeYk/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>

•  Step 5  Simpan lalu cek bog anda untuk melihat hasilnya

penyesuaian

• Ubah Title 1 dengan judul widget tersebut,gunakan ini untuk semua title seterusnya
• Ubah Isi konten 1 dengan kode widget yang ingin dimasukkan kedalam menu accordion

Read more : Berbagai macam  Widget Blog

jika ada yang ingin agan tanyakan  silahkan berkomentar .wassalamualaikum wr.wb.