Cara Membuat Menu Accordion Tanpa Edit HTML

Unknown

Blogger, Tutorial

Sunday, 29 December 2013

16 Komentar

Hai sahabat FBL heheh udah punya sebutan nih buat fans pembaca blog ini . Saya punya cara nih supaya blog kita menjdi lebih elegan, simple, fast loading, tapi tetep keren nih. Mau tau caranya ?
Beberapa waktu yang lalu saya membuat posting tentang hal yang fungsinya sama yaitu Cara buat Tab View Keren v2 tanpa Edit HTML dan Cara buat Tab View Keren tanpa Edit HTML

Tapi sekarang saya membahas hal baru yaitu Cara Membuat Menu Accordion. Menu Accordion lebih berbeda dan lebih simple dari pada Tab View, Karena ada batasan saat membuat Tab View antara 3-4 atau lebih, tapi di Menu Accordion kita bebas menempatkan widget/ gadget didalamnya. Tunggu apalagi buruan pasang
Cara pasangnya

• Buka Blogger sobat
• Pilih Layout/ Tata Letak
• Pilih Add Element/ Tambah Elemen
• Pilih HTML/ Javascript
• Masukan kode berikut didalamnya

 <style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#999999;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeURZ89cOVx7rtKMQl3T4gom9IMeoBJsBZbOGkhelLe5DOL1CBPIKTJiaUXvCZB7e4adngzey0SER5RAqumUnUFe0zfA96-IUXwCO_oobPNVsOcap5FdPZzWTA-lqqbDew1Ke2Z3HVOxU/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#fff;font:normal 13px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#f5f5f5;border:0px solid #eeeeee;}
#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/AVvXsEhi0ONoRQK38ikw8VKE2XfyQJ7qfdx7nRK4e9uUQRVh2kdadNEt8z5PDFIrmT8OC8ZLmbUMT-jRkasfUKstup8K5Ci-noDH5lqgFPu5Qj6l3adph9XP5LJSaE2BYrVviiSXDrK3Wxrqcq8/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>Konten 1</h2>
<div class="content">
Isi Konten 1
</div>

<div id="accordion">
<h2>Konten 2</h2>
<div class="content">
Isi Konten 2
</div>

</div></div>

• Simpan dan lihat hasilnya 

Selamat mencoba  yah kawan
Demo bisa dilihat di blog ini

Note

Ganti kata yang berwarna Merah dan Biru

 Hargai penulis dengan mengirimkan saran dan komentar serta seraya mengklik iklan yang ada di blog ini