Membuat Menu Accordion Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Barangkali para blogger atau visitor sudah sering melihat menu yang apabila di klik atau di sorot ( mouse over) pada menu tersebut akan muncul sub menunya terbuka scroll ke bawah atau ke samping di beberapa artikel Blog,wordpress ataupun yang lainnya seperti di Blog ini.Itulah yang di namakan menu Accordion seperti yang di pasang di blog ini di sidebar sebelah kanan.Tujuan dari menu ini yang paling penting adalah untuk menghemat tempat, fleksibel penempatanya dan tak kurang pentingnya untuk mempercantik tampilan Blog. Sehingga hampir semua blogger sudah memakai widget ini untuk di jadikan bagian dari tampilan blognya.
Screenshotnya:

Caranya :

1. Tentunya LOGIN ke blogger dulu

2. Pilih Rancangan/ Tata Letak

3. Klik Add Gadget pada sidebar

4. Pilih Java/ HTML

5. COPPAS kode di bawah ini

<br />

<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/AVvXsEgCjyhqUa-ojZ-oEbF2K4xBnkHcDVU47B7jC574owGfEpjqHc09-rRJtXXt5ue4HvVwrB_er7QN0kCgpnGKDXdeYWfZyFE1xbrZ_Iw-c0iYc3OUsk0tt5MMZA1ghlfETESbwM2subMwcUE/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/AVvXsEjQDoVLpxLtiPE7evRk1X2_diXG2ZUVxcDhln97BfxAMWUMHIayuIX7QV73ZC-jE0eViKCca3NgPyFNhpJgmrV28z_lGRf8NrcuAOFXHXtNbOCUIYsc-qAe13YJ7D45C66a3Ls6gtVXATA/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}

</style><br />

<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br />

<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><br />

<div id="accordion">

<h2>

Title 1</h2>

<div class="content">

Isi konten 1<br />

</div>

<div id="accordion">

<h2>

Title 2</h2>

<div class="content">

Isi konten 2<br />

</div>

<div id="accordion">

<h2>

Title 3</h2>

<div class="content">

Isi konten 3<br />

</div>

<div id="accordion">

<h2>

Title 4</h2>

<div class="content">

Isi konten 4<br />

</div>

<div id="accordion">

<h2>

Title 5</h2>

<div class="content">

Isi konten 5<br />

</div>

</div>

</div>

</div>

</div>

</div>

Keterangan Script :
- Title-n : Menyatakan Judul Accordion
- Isi Konten-n : Untuk Script konten

Anda Sedang Membaca Artikel : Tutorial Blog dengan judul "Membuat Menu Accordion Blog". Anda bisa bookmark halaman ini dengan URL https://hobbypusing.blogspot.com/2014/03/membuat-menu-accordion-blog.html.

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Like Me: Facebook Twitter Google+ Linkedin Technorati Digg

DAFTAR ARTIKEL HOBBY PUSING