Home » » Membuat Menu Accordion Tanpa Edit HTML

Membuat Menu Accordion Tanpa Edit HTML


1. Login ke Blogger dengan akun Anda
2. Masuk ke Layout, pilih HTML/Javascript
3. Kemudian masukkan kode berikut ini ke dalamnya (kek bikin masakan aja) :

<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/AVvXsEj8HdRXNusuYjdv5-NBbC2TTfwzMWCVbBVRvN6Sn0Rp1URg7YmCit4GBjmvLuJE_pM7_eqWB6-oCvccOjyYIWxjb1gES7yPmMlcA7n4AbGcoCKXwmjnq574k5gs8wAGIF6rIJHmRZ9ucqw/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/AVvXsEhoL3c73dVNT1r6-TElYaQB69Abc2zP1aFxZ2fy4AoSXTEIrDtHzRLr8JQPXdhGCwJrlgCW-eVmBrLw0tKuiv24I-meIIwm7McyM3iOD2Opmwo7y8SwnvJ97gP0Np83JkkjOYotitC0WQk/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>


4. Terakhir Save, lihat hasilnya

Souce
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 komentar:

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Oke Google - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger