FBACKLINK
Sunday, 29 December 2013

Cara Membuat Menu Accordion Tanpa Edit HTML

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(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/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(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/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

16 komentar

Wah nice inpoh kang, sering-sering yah share tentang yang berguna buat blogger cupu seperti saya

keren infonya sob, ..
template kamu jg keren

Izin Nyoba gan :D , Bisa Nambahin Valid HTML

wah ,mantep patut dicoba neh

Trims atas tutornya..
Tapi aku masih nggak ngerti apa itu menu accordion

wah agan kan udh dewo
saya jdi malu

simpen duku deh siapa tau nanti perlu :D

follow balik ya > http://kodesaja.blogspot.com/

sepertinya sangat sederhana sekali ya mas untuk membuat menu accordion ini. Bisa dicoba nich tutorialnya :)

nah ini nih yang lagi saya cari.. ijin save gan,, siapatahu kapan kapan saya pingin buat sidebar accordion

saya msih nuebie mastah
sungkem (-/\-)

sepertinya tutor ini bukan patut saja tapi memang layak untuk dicoba.

Jangan menggunakan link hidup
Jangan menggunakan kata kata Spam, SARA, OOT, dsb
Berkomentarlah sesuai Topik
Jika tidak mengikuti peraturan diatas maka akan saya anggap SPAM
Silakan komen , No Moderation but you get backlink