MEMBUAT MENU ACCORDION PADA BLOG

Bagi temen 2 blogger yang mau menghemat ruangdi blog dan sekaligus mempercantik tampilan blog sobat,tidak ada salahnya untuk mencoba menggunakan menu accordion,untuk cara membuatnya ikutilah langkah2 berikut ini.

1.Sobat login ke blogger dengan akun anda sendiri.

2.pilih layout dan pilih HTML/JAVASCRIPT

3.Kemudian masukkan kode berikut ini di 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/AVvXsEiV4bkJqn-AbdEmyY9pF_TgjjZl-9qA4xMOzo6UaFailsWlDNbP9If5oEpA04_xmkESUgy23Xu11FaXENLjEeAeApRMJMtuP39xGgq-fIJyLShrNhktvn0dBY8xMKKPVYx8K2sxunhk2Ao/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/AVvXsEgJbA29sNcWHl3sAoDBxibJgbb4otuWZ3b_elerlqgvjUyGqvFblYC30HWqeEFvZPJ1nfPjdDARmbot-2Kl05IGsv0YNvFAg0-dDaPUKmSXhaqECVF41vN3YvUcB9cp6tiN4kjK5QVPpvg/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>

4.Kemudian tinggal di SAVE aja dan lihat hasilnya

Keterangan:

1.kata TITLE adalah judul heading menu accordion

2.kata ISI KONTEN bisa anda isi dengan widget yang anda kehendaki.