Cara Membuat Buka Tutup Keren Pada Postingan Blog

Selamat sore sobat..saya dapat ilmu dari blog teman nih..pernah ngak sobat melihat di blog lain ada yg memasang tombol buka tutup di blognya,,di blog sob bukan polantas ya..kalau jalanan lagi macet apa lagi kalau udah mau tahun baru pasti para petugas kepolisian membuat suatu sistem dengan nama buka tutup..lahh kok ngomongin pak pol ya,,ya kira2 seperti itu lah sob..nah disini lainnnnnnnnnnnnnnn ceritanya sob,,saya buat sistem buka tutup nya buat blog..dmana buka tutup ini bisa sobat gunakan dimana saja yg sobat inginkan..misalnya sobat ingin membuat java script dengan model tombol buka tutup atau di sidebar sobat,,silahkan aja sob..nih saya berikan kodenya yg saya dapat dari teman saya Blog Yulia untuk lebih jelasnya silahkan sobat ikuti tipsnya dibawah ini
Berikut ini adalah tips mengenai cara-caranya beserta keterangan gambar. Bagi teman-teman yang ingin memasang tombol buka tutup di blog / postingan, caranya gampang. Sobat hanya perlu mengcopy paste kode HTML di bawah ini ke dalam postingan sobat blogger:
pertama masuk di akun Blogger
==> lalu klik post
==> dan klik html (bukan compose)
==> lalu copy paste html berikut ini:

<!---Start code show hide by;"afa aprilion-amigos.net"--->
<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: left;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin-top: 5px; width: 60px;" type="button" value="Buka" /> </div>
<div style="background-color: black; border-bottom: 2px solid #ff0000; border-left: 20px solid #ff6600; border-right: 2px solid #ff0000; border-top: 2px solid #ff0000; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="color: white; font-style: italic;">
... Isi Teks Sobat...
</span></div>
</div>
</div>
<!---End code show hide by;"afa aprilion-amigos.net"--->

Keterangan ;
Code; <div style="margin-top: 5px; text-align: left;"> ; merupakan code untuk penempatan tombol Buka Tutupnya.. Mau sobat taruh di sisi kiri dengan code left. Untuk ditengah dengan code center. Untuk di sisi kanan dengan code right. ingat, hanya ubah yang berwarna merah aja ya soob.
Code; Tulisan Tutup Buka Buka yang berwarna hijau, silakan sobat ganti debgan sesuka sobat.
Code; width: 60px ; Yang berwarna hijau tersebut Merupakan nilai ukuran lebar dari tombol Buka Tutup tersebut.. Silakan juga sobat rubah sesuai keinginan sobat.Tapi hanya sobat rubah nilainya saja yaa.
Code; ... Isi Teks ... ; Ganti dengan Isi artikel sobat sendiri, atau terserah sobat lah... hehehehehee.

Lihat Hasilnya:


Yah...seperti inilah hasilnya sob....selamat mencoba moga bermanfaat.

selamat mencoba yah.......??????!!!!!!

1 ulasan:

  1. Keren artikelnya, apalagi ada gambar cewek cantiknya yang menarik :)

    kunjungan balik ya: www.tokoonlinebaru.com

    BalasPadam