Cara Membuat Menu Accordion Sederhana

Salam sejahtera sobat laresawoo. Dalam dunia blog baik itu hosting gratisan atau berbayar pasti tidak lepas dari sebuah template. Sebagian blogger akan berusaha mati-matian untuk membuat template blognya agar kelihatan bagus dan tidak LOLA. Tapi ada beberapa blogger yang tidak memperdulikan tentang template, yang penting update artikel. Salah satu masalah yang membuat blog menjadi lemot adalah dalam penempatan widget. Mungkin dengan menempatkan beberapa widget pada sidebar blog akan kelihatan lebih menarik. Tapi dampaknya blog akan lebih berat loadingnya. Namun jangan khawatir, dengan membuat menu accordion masalah loading lama akan segera bisa teratasi.

jangan lewatkan : Cara Memasang Kode Warna

Banyak sekali cara membuat menu accordion, begitu juga dengan modelnya. Dan kita bisa dengan mudah untuk mengganti warna dan elemen lainnya pada menu ini. Cara kerja menu accordion sangat sederhana, yaitu dengan menyembunyikan isi dari label yang kita buat jika kita tidak klik label tersebut. Jadi kalau kita ingin melihat isi menu tersebut, kita tinggal klik nama menunya dan otomatis isinya akan muncul. Untuk pemasangannya juga sangat gampang, simak langkahnya dibawah ini !

Cara Membuat Dan Memasang Menu Accordion

1. Masuk ke akun blogger

2. Pilih Tata Letak

3. Klik tambahkan Widget di tempat yang kita inginkan

4. Lalu pilih HTML/JavaScript

5. Kemudian Copy kode dibawah ini dan Paste ke widget HTML/JavaScript

DEMO

<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/AVvXsEgTAJ_09YVA-Et6wFJTqubVoldJN25DkeKU1A7CBTd2LCDUtn1JLBuygzZDKaGL1UsA6EpGVv75rv0IQT1ST0xKYfGpLKrIoYnwaDMKHL4mQu6MXad8FzGxB-Mi9h3BwC0VgI3-feGqUko/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/AVvXsEh7cAE0ohYqNl-5pPDOEiBLTrhmT9vPhZ2NpnmdxSVYS39qq8k_4rkF9rgL8rGoXE95-qOadp_oNCfGFGOGcGnqQWVK1NUYHfTqze5hwxNgEwjRKHZ7PKKjiCR_8HmZd93oPBarTbuuXOk/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </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>Judul 1</h2>
<div class="content">
Isi dari judul 1
</div>
<div id="accordion">
<h2>Judul 2</h2>
<div class="content">
Isi dari judul 2
</div>
<div id="accordion">
<h2>Judul 3</h2>
<div class="content">
Isi dari judul3
</div>
<div id="accordion">
<h2>Judul 4</h2>
<div class="content">
Isi dari judul 4
</div>
<div id="accordion">
<h2>Judul 5</h2>
<div class="content">
Isi dari judul5
</div>
</div></div></div></div></div>

Keterangan :

• Merah = warna background judul
• Biru = warna background isi
• Ungu = ganti sesuai selera
• Hijau = bisa di isi dengan text atau kode script

6. Setelah semua pengaturan sudah selesai, Pratinjau Template dulu. 

7. Kalau sudah pas dan cucok, silahkan SAVE.

catatan : usahakan isi dari judul 1 hanya berupa text

Dengan memasang menu accordion, kita tidak lagi pusing dengan widget yang berisi gambar atau video. Akhir kata, semoga artikel di atas bermanfaat buat kita semua. Sampai jumpa pada artikel selanjutnya. Salam.

Artikel Menarik Lainnya

• Tweet
• Share
• Share
• Share
• Share