Selamat Datang di Blog She-Cengos...
Sabtu, 14 Juni 2014

Cara membuat menu accordion tanpa edit html


Cara membuat menu accordion tanpa edit html :1. Login ke Blogger dengan akun Anda2. Pilih Tata Letak => tambah gadget3. Pilih HTML/Javascript lalu masukkan kode berikut kedalamnya


<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid #000} #accordion h2{background-color:#;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdTZMMPeex5FscPvq1w91o7Tzq8pFNm1Y_nmUjVkjztRt-na_KIgwLkqC3PHKfpc0jX5-_4txVxJgPaChsqpNFGee4430OWDB11ELT1Elf_sE5hfcZ4fGsLE5vVk_CjGG-yneqMVEaqB8/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 12px Tahoma;border-bottom:2px solid #000;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 12px Georgia;background:transfarent;padding:5px 0px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px solid #000;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#00FFEE} #accordion h2.active{background:#444;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJkhwgkfmDNSfTr64x0eJuXYEByLDveM3TesbWNutQKwYL9Ozhavwy3ACs5JS4ddcA0_cGmpRAbwmqfS6NiHsUNsTL1swxUD-JzmR97-8bTUSjbUWHpKw9QSFt0SmIJWeya7jjlAAsJ4/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></div></div></div></div></div>

- ganti tulisan yang berwarna Merah dengan tulisan anda atau kode JS anda.

0 komentar:

Posting Komentar

Like This Facebook!!!

×

Powered By Blogger Widget and Get This Widget

Menu

Sekilas tentang saya