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/>
Isi kata Isi Konten dengan Konten sobat
5. Klik Simpan , dan liat hasilnya
Saya sangat berharap sekali semoga anda mengerti dengan tutorial diatas, karena saya juga masih rada bingung, hehehe. Tapi tak apalah, yang penting membagikan artikel, dan siapa tahu artikelnya bermanfaat bagi semua, Karena membagikan ilmu sangat baik.
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.
<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/AVvXsEgHetg2-zcUM4W7V2s7A7zyI8Hh4uSmnCUFX9g-yl6QEcvaoNHC71aDENtaNrdBUnohugpWfq-l42EWgaL1S_z93o8CT0-M4CVyQhyphenhyphenH_CdapypgVK4YVixKeYNVx0BzAvWLFZC4O6Fatbo/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/AVvXsEh309j76nLwao6w6yVKDjg2epi7w8zVivjTGRqMgeRoNKSi7zsd7Nx-8kOkudnAWoGy_QyhShyphenhyphen1sC_I0q-mRxD1uGze3K7hd6JS-esArq8MCWuy8g-oqL3gs-ogTTzwYjSMVdFRsT8q97Y/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>Isi kata Isi Konten dengan Konten sobat
5. Klik Simpan , dan liat hasilnya
Saya sangat berharap sekali semoga anda mengerti dengan tutorial diatas, karena saya juga masih rada bingung, hehehe. Tapi tak apalah, yang penting membagikan artikel, dan siapa tahu artikelnya bermanfaat bagi semua, Karena membagikan ilmu sangat baik.
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.
