Cara Mudah Membuat Menu Accordion di Sidebar Blog

Sore sobat Oplosanblog semuanya. Kali ini saya akan memberikan tutorial cara membuat menu accordion yang simple dan mudah tanpa harus Edit HTML. Untuk sumbernya saya dapat dari blognya maskolis. Untuk tampilannya sendiri bagus menurut saya karena bisa memperingkas tampilan blog sobat. Jadi lebih rapi juga. Bagi yang tertarik buat silahkan ikutin tutorial saya di bawah ya.

Cara Mudah Membuat Menu Accordion di Sidebar Blog
1. Login ke akun blogger sobat
2. Masuk ke tab menu Tata Letak > Tambahkan Gadget > HTML/Javascript
3. Kemudian tinggal sobat copypaste saja kode berikut ke dalamnya
Kode untuk template background terang

<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/AVvXsEj_DvGlBOffl10g6erIfRl1UqMTZsFcT5N8pZlr9HTeMDnyEqTtHgZP-vzllSieayXwDf8Uq7RJrM6c6h0XGYuSrqDwOEm65mv87XWB-u5fG1qpiy4UHoPdbJOk2KsjnN2hN0CFA3zZ3BQ/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/AVvXsEj3_QkDWqQFwJBDRB-9222CjkbhD-UTNcDn5y7PYJwIAWLl6dItdekj32Cim7du95MmwiI4e1sFP7zvRiu8OeX5Nj1OuFl7fx3dHJh1MOVqBhoS7TbqvT3SvtBgrics3jjLCCsCCpzsShM/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;} </style> <script type="text/javascript" src="https://googledrive.com/host/0B9SBWEZ6FHqYOHc2dnI4bDBGSjg/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>        

Kode untuk template background gelap

<style type="text/css"> #accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ogv5Wv1bsd05hB_kkmetQWD_5khsu98K0upGZEHLhKwcVzXTDLqf40W0humCG_YxO5Dsizu7KHnbNTeChyphenhyphenWPH2AcGejyNShhYz_3aET2LmahZMwuVDULITVh-1TrHjRmTQgOp3myN2s/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiExZv6tgAO7TGN1EOmGsS85mqdJaoCGYKVJf6g8pEpChVzn0EHhkLGUxYqPC2dI2LhLwL1z1WZibetRX3Ms4L1UYV5cZEi_1C1BEYEaruN-MjCzsBng_uhB2he9voevdB7vesUpOlh5-k/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style> <script type="text/javascript" src="https://googledrive.com/host/0B9SBWEZ6FHqYOHc2dnI4bDBGSjg/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. Klik Simpan
Keterangan :

• Title : Judul yang ingin sobat tampilkan di menu accordion
• Isi Konten : Silahkan Isi dengan widget sembarang atau juga bisa iklan kalo ada

Bagi yang ingin menyimpan javascript menu accordion silahkan download link dibawah :

Download Javacript Menu Accordion

http://www.maskolis.com/2012/12/membuat-menu-accordion-tanpa-edit-html.html