Style Accordion Menu Tanpa Edit HTML

Untuk membuat dan memasang widget menu accordion tanpa Edit HTML ini sangat mudah dilakukan. Widget accordion menu tab view ini dapat anda letakkan di sidebar blog dengan tujuan untuk ngirit ruang halaman blog dan juga membuat blog loading ringan dan cepat. Nah simak bagaimana cara membuat menu accordion tanpa edit html di blog.

Cara membuat menu accordion tanpa edit html di blog :

Pada dasbor blogger, pilih Tata Letak => Tambah Gadget => HTML/Javascript lalu masukkan kode berikut ini.

<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/AVvXsEhUoAolMNtAzTwUCjIiqYUr6C5ZuRTvrgGHauD6FXLvRTccoIpr5pmh0E73UjM6Zq1FqgOF9hnMF_OI8pP_ZYKoT0VFQPWdGEMttEIBtM9QFKjdBaCxkVU9cbNl81diJETywqvmC53HkHE/s1600/panah.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/AVvXsEhCi14ArPOyiVHRGjIobegkLNJejofWpGTv1pOkFRAdXRhxNTZ0WIfCzOsQXkvyfgSyY07XFCyCxOuL8Il2Ws2BOxyTLOmznpwY4G9aD6tTp_GZu89_i4nzFgElxmqEw7UIQ1tLuPZm0KE/s1600/panah-bawah.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>

Keterangan :
- Title 1 s/d Title 5 merupakan judul dari menu
- Ubah tulisan "Isi konten" dengan kode script atau kode widget

tutorial blog

Terlintas

Style Accordion Menu Tanpa Edit HTML

Related Posts

Entri Populer