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.......??????!!!!!!

Related Posts:

  • Kumpulan Animasi Bergerak dipojok Blog Hai sobat blogger semua,kali ini saya akan berbagi sama kalian gimana cara membuat animasi bergerak dipojok blog,dibawah ini adalah scripnya,anda tinggal kopi ajah,semuanya uda siap pakai,oh ya lansung aja kita kupas: … Read More
  • Cara Membuat Iklan Melayang dengan 2 Kali Klik Close Selamat malam sobat blogger,kali ini saya akan mencoba berbagi gimana cara membuat iklan melayang dengan 2x klik close,blog akan kebanjiran klik iklan. Karena untuk melihat artikel utama di dalam blog harus menutup atau men… Read More
  • Trik Memasang Banner Iklan Di Header Blog Memonetize blog dimana banyak cara yang bisa di lakukan seperti kebanyakan blogger tentunya sudah paham trik-triknya seperti ikut Adsense,Affiliasi ,Ads banner untuk disewakan dan lain sebagainya ,berusaha tidak ada salahny… Read More
  • Membuat 3 Kolom di Bawah Header BlogspotApa teman-teman blogger semua ingin tampilan blognya tambah ramai? Kali ini saya akan menjelaskan sedikit tentang bagaimana cara membuat ramai blog teman-teman semua, salah satunya dengan membuat tiga kolom di bawah header. W… Read More
  • Cara Mudah Parse Kode Iklan Dan HTMLDalam dunia Blogger kita sering baca istilah Parse, Encode atau Decode terutama jika berhubungan dengan kode HTML (Hyper Text Mark up Language) yang ingin ditampilkan pada artikel atau mengeksekusi kode Iklan agar bisa tampi… Read More

1 ulasan:

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

    kunjungan balik ya: www.tokoonlinebaru.com

    BalasPadam