Membuat Widget Buka Tutup di bawah Postingan Ala Blog Teriaaak

Tutorial ini juga saya minta langsung dari Mas Birlando dan Mas M Rakadinata pemilik blog (http://teriaaak.blogspot.com/). Saya sangat mengucapkan terimakasih kepada Kedua Mas-mas diatas ,karena permintaan saya telah di setujui dan dibagikan kepada semua. Dan sebagai bentuk terimakasih saya ,   saya akan memberi tautan ke blog Teriaaak. Bagi sobat yang ingin mengujungi blog Teriaaak klik Disini, Blog Teriaaak juga loadingnya sangat cepat dan desainnya pun membuat pengunjung betah berlama-lama di blog Nya. Oh ya ,  Kembali ke tutorial semula.Widget ini sendiri di modifikasi oleh Mas Birlando yang terinspirasi dari Blog mas hendriono [modification blog].

Apa fungsi dari Widget Buka tutup ini ? Menurut saya widget buka tutup ini membuat blog lebih simple dan lebih enak dilihat mata , karena membuat tata widgetnya menjadi rapi. Lalu mana contohnya ? Berikut ini contoh gambarnya , Saya ambil langsung dari blog Teriaaak.blogspot.com :

Sobat tertarik untuk menerapkan di blog sobat seperti Blog Teriaaak itu ??? Kalau sobat blogger mau silahkan ikuti langkah-langkah saya dibawah ini :

1. Login ke Blogger (http://www.blogger.com/) Sobat

2. Klik Template > Edit HTML 

3. Backup Template Sobat / Copy template sobat dan letakkan pada Notepad , untuk mengantisipasi kesalahan

4. Cari Kode <data:post.dateheader/>

5. Dan letakkan kode berikut dibawah kode <data:post.dateheader/>

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/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(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script src="http://yourjavascript.com/121511228073/accordion-menu.js" type="text/javascript"></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 :  Isi kata Title dengan judul widget sobat
                       Isi kata Isi Konten dengan Konten sobat

5. Klik Simpan , dan liat hasilnya

Demikianlah postingan saya tentang Membuat Widget Buka Tutup dibawah Postingan Ala Blog Teriaaak, Semoga Bermanfaat bagi sobat semua , dan bila ada kata yang kurang pas / salah mohon dima'afkan , Wassalam.