Cara Membuat Tab Menu Accordion


cara membuat menu accordionSetelah sebelumnya saya sudah menuliskan bagaimana Cara membuat daftar isi accordion dengan mudah,saat ini saya akan membuat sesuatu yang masih berhubungan dengan accordion juga,yaitu cara membuat tab menu accordion,biasanya menu ini di taruh di side bar blog.

Menurut saya banyak manfaat nya dari tab menu accordion ini,selain untuk meringkas gadget baru,menu ini akan terlihat elegan dan tidak memakan banyak ruangan di blog kita,seperti halnya daftar isi accordion,tab menu accordion ini cara kerjanya relatif sama,yaitu sistem buka tutup.

Untuk cara mebuat menu accordion ini sobat bisa ikuti langkah-langkahnya seperti yang saya terangkan di bawah ini;

  • Pertama masuk ke akun blog milik sobat ( ya ia laah,,masa milik orang lain ).
  • Berikutnya masuk ke tata letak>> tambah gadget baru>> HTML/Java script.
  • Taruh kode di bawah ini ke dalam widget HTML tersebut.



<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;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:#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(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>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>



  • Terakhir simpan.

KETERANGAN;
TitelJudul heading accordion
Isi conten = Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget)

Script di atas bagus di gunakan untuk blog yang background nya berwarna terang seperti blog saya ini
Jika blog Sobat yang mempunyai warna gelap atau hitam, tinggal diganti kode css-nya,. Lebih lengkapnya seperti kode di bawah ini :  

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(http://2.bp.blogspot.com/-w2rXmKKoIWw/TyAHgaAoNyI/AAAAAAAAEvo/EQb_qVUputU/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(http://3.bp.blogspot.com/-DAMBJVFbFmM/TyAHg2YnFAI/AAAAAAAAEvs/n6uvhcqO7V8/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>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>

Sekian dan selamat mencoba..
SEMOGA BERMANFAAT...
Terima Kasih Atas Kunjungan Anda
Judul: Cara Membuat Tab Menu Accordion
Ditulis Oleh Hary Muhlia
DILARANG KERAS Copy Paste 100% artikel ini!!! Artikel ini dilindungi dengan setifikat DMCA.com Protection Status Protected, silahkan edit minimal 60% adalah hasil narasi anda sendiri dan jangan lupa sertakan link yang menuju ke artikel Cara Membuat Tab Menu Accordion ini sebagai sumbernya. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya

Bagikan ke

Iklan Anda
Berkomentar dengan
atau
silahkan tentukan pilihan sobat!

8 komentar:

  1. sudah terlalu banyak widget punya saya hehehe :D

    BalasHapus
    Balasan
    1. justru itu mas,,gadget yg satu ini bisa di isi hingga 5 widget sekaligus,,coba lihat di samping blog saya,ada recent post,recen koment,link sahabat dll cuma butuh 1 gadget saja..hee,,praktis kan?

      Hapus
  2. bagus ya bisa buat ruang blog lebih clean dan effisien, mantap dah
    bookmark dulu, sob:)

    BalasHapus
  3. Dear Mas Hary,

    Makasi iya mas buat kode script Cara Membuat Tab Menu Accordion nya. Kodenya sdh kami terapkan diblog kami dan sukses kami terapkan. Sekarang ruang widget disidebar blog kami jadi lebih simple :)

    Terima Kasih

    BalasHapus
  4. Terima Ksih Atas Informasinya Widgetnya Sukses Di terapkan Di http://blog-azhan.blogspot.com

    BalasHapus

1.Jangan lupa koment yah kawan,untuk mempererat silaturahim.
2.Komentar Tanpa Moderasi. Yang mau pasang Link,gunakan NAME/URL atau Open ID.
3.Silahkan kawan becanda,asal dengan etika.
4.Terimakasih kunjungan dan komentarnya kawan,Mohon maaf jika belum bisa berkunjung balik
5.Tetap tersenyum meskipun sedih.

© 2013 Harysukasuka - All Rights Reserved | Disclaimer | Privacy Policy
Template by IdleCreative
Back to Top