Cara Membuat Menu Accordion di Blogger

Bismillaahirrahmaanirrahiim !

Baca Juga

Cara Membuat Menu Accordion di Blogger

Manteman berhubung mau Maghrib. Ane langsung aja ya :). Ane mau share cara membuat menu Accordion. Menu ini ane bilang sih membuat tampilan blog nanti terlihat keren, profesional, bagus, canggih. Ini kodenya :

<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/AVvXsEhHzs7GNnxdTIGi8CqUeYwnjU71FhLjpntSyyN7KKxLAvJBDS-Bk7-CrbBZ7Bq_WpcWZt_OEfFoEAb0syL6NeSt-Cz2IdQVEHSUzyg1pUk_0ZxBSzanZbfgabs2kmPzO-1hP90fQDEq_Xc/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/AVvXsEhvTYHvfjoZX2fAQx3sdCAANlhHLcADnfq0IKxzQNHpbdr32v8U8Pm68X6SdnKyzvw8Dc3pqgegHm8VF3Mr8bL0vdR3kEIyHZGSr9c2a0XxQNL3VcC1PJkpyT9XF7NnLaQLcPBc_OHBQwE/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>Judul 1</h2>
<div class="content">
Isi dengan tulisan atau kode html
</div>
<div id="accordion">
<h2>Judul 2</h2>
<div class="content">
Isi dengan tulisan atau kode html
</div>
<div id="accordion">
<h2>Judul 3</h2>
<div class="content">
Isi dengan tulisan atau kode html
</div>
<div id="accordion">
<h2>Judul 4</h2>
<div class="content">
Isi dengan tulisan atau kode html
</div>
<div id="accordion">
<h2>Judul 5</h2>
<div class="content">
Isi dengan tulisan atau kode html
</div>
</div></div></div></div></div>
Selanjutnya ganti tulisan Judul 1 sampai Judul 5 dengan kebutuhan judul manteman kemudian pada bagian isi dengan tulisan atau kode html isi saja dengan kode html yang mateman punya. 

Langkah terakhir masuk ke akun blogger manteman buka layout kemudian tambahkan gadget html/Javascript dan klik simpan atau save.


Selesai :)

Share this

Master Seni