Selamat pagi sobat blogger,kali ini saya akan berbagi tentang :gimana cara membuat widget buka tutup dibawah postingan blog seperti gambar diatas.
Sebenarnya trik ini gampang, saya terinspirasi dari blog nya Teman yang memiliki widget atau apalah namanya. Bukan niat untuk mengambil hak cipta beliau tapi saya sangat terkesan dengan widget ini karena terlihat lebih rapi dan simple.
Jangan kan Menanyakan kepada Blog nya, [modification blog] orang yang berkomentar di blog tersebut saja sangat jarang di gubris oleh yang punya. Jadi saya males bertanya kepada beliau.
Oleh sebab itu saya mendapatkan cara simple yang saya edit sendiri.
Harusnya saya memiliki nama untuk widget ini, apa yah namanya? Ok saya beri nama Widget malu malu mau. kalau di lihat lihat sih ini bukanlah sebuah widget ini hanya campuran dari beberapa cara yang saya ambil dari blog nya beliau dan membuat nya juga sangat gampang asal mengerti struktur post blog yang anda miliki.
Awalnya saya membuat Widget M3 [malu malu mau] ini juga sangat bingung bagaimana mengaplikasikannya pada blog saya. Terlintas saya sedikit lupa tapi insyaallah cara yang saya berikan memudahkan anda untuk tetap berkreasi.
Apa yang harus anda lakukan untuk mengaplikasikan Widget M3 ini adalah melihat kode Accordion yang di share. Berikut kode nya :
Letakkan kode ini dibawah <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwsWlVCwHNbABRxaEmiH_TpOx4Wf1ri6fIpMc7BV7zYKj20bWZhm_P9ACo1pMUtOlurkv8-Dog_GItbqolpfCEZEVwivfUHVc2NZxRqdgrOYThZj49_7XkgvYE6lJnZgpWvV5bn7DS/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/AVvXsEhACpOuN2HkfKxidK-1COp4g-ifAj9hhfUieF_T9oHXXJviFeD0tEmox9693cNATjY-pD4zvUiKASYGut4SCDdrYy8wrfK-OZlwLm3JVE0xGdxQNQo9_Ii5q3cMXNSJ0kNTom-1UzSI/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>
#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/AVvXsEjwsWlVCwHNbABRxaEmiH_TpOx4Wf1ri6fIpMc7BV7zYKj20bWZhm_P9ACo1pMUtOlurkv8-Dog_GItbqolpfCEZEVwivfUHVc2NZxRqdgrOYThZj49_7XkgvYE6lJnZgpWvV5bn7DS/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/AVvXsEhACpOuN2HkfKxidK-1COp4g-ifAj9hhfUieF_T9oHXXJviFeD0tEmox9693cNATjY-pD4zvUiKASYGut4SCDdrYy8wrfK-OZlwLm3JVE0xGdxQNQo9_Ii5q3cMXNSJ0kNTom-1UzSI/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>
Catatan Penting :
- Usahakan Anda mencari kode <data:post.dateHeader/> jika ketemu pilihlah yang pertama dan letakkan dibawahnya. Jika anda tidak menemukan kode tersebut usahakan cari dimana anda meletakkan posting dan letakkan kode diatas tadi tepat dibawah kode posting blog milik anda.
- Kemudian yang saya tandai dengan warna merah dari isi konten 1 sampai isi konten 5 anda modifikasi seperti yang anda inginkan. Ambil dimana anda meletakkan related artikel dan letakkan di isi konten 1. cari kode dimana anda meletakkan informasi artikel dan kotak komentar dan isi sesuai dengan konten berapa yang anda inginkan. Dan begitu seterusnya.
- Setelah anda melakukan itu lihat hasil nya, Apakah cara tersebut berhasil atau tidak tergantung anda yang bekerja.
Jadi saya memberitahu cara ini tidak langsung instan, Kenapa ? Karena setiap blog memiliki karakter dan penempatan kode yang berbeda oleh sebab itu anda juga harus bisa berusaha.
Selamat Mencoba,semoga bermanfaat.
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot
Sobat sedang membaca artikel tentang Cara Membuat Widget Tombol Buka Tutup Dibawah Postingan Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
thank gan..ane coba..!
ReplyDelete