Widget accordion atau bisa juga disebut dengan multi slide ini memang terlihat sebagai slide. Kita tinggal mengklik judul widget maka isi widgetnya akan muncul.
Jika Anda tertarik untuk menggunakannya di situs web atau blog Anda langsung ikuti saja tutorialnya berikut ini:
1. Masuk dasbor Blogger.
2. Pilih Tata Letak > Tambahkan
gadget > HTML/Javascript.
3. Copy-paste kode berikut pada
kolom content:
<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/AVvXsEixF4Ipb64z1ygrii9KJc48M-pY5rbNO-0MbUR-1SlDh9VMiD23bMoHoDCreY8kANBKo9tmZoPk3zGhgEmdvadk3s2RUNAMvuHafkXxjyBz-lZJbFEttSRgDGeqzpmtQNq-iL8Zwdu0Pfg/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/AVvXsEh8LGTUmJFfmF4lCwC1sIbw9gs8UQnJKObMmIfsngOQ2N9nu_bg-L4kFwVJgDNU6hpZgvww_73jJzsyZRwQdxPaqexQIMvGRelpeVQPUXuzqNEZnHk6NOIi9l_6xdpHngANuNnXisIrJYM/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.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 konten 1
</div>
<div id="accordion">
<h2> Judul 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2> Judul 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2> Judul 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2> Judul 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>
4. Simpan dan lihat hasilnya
Keterangan:
- Ganti Judul 1,2,3,4 dan 5 dengan judul widget yang diinginkan.
- Ganti Isi konten dengan konten yang sesuai dengan judulnya.
- Silahkan atur juga warna background, ukuran huruf dan lainnya supaya sesuai dengan template yang digunakan.
- Untuk menambah judul konten tinggal tambahkan kode berikut:
<div id="accordion">
<h2> Judul 6</h2>
<div class="content">
Isi konten 5
</div>
