Membuat Spoiler (tombol Buka Tutup)

Selamat berjumpa lagi di fayescool.blogspot.com yang pada kesempatan ini akan mencoba share Tentang "Membuat Spoiler (tombol Buka Tutup)" diblog butut ini. Seperti apakah info tentang "Membuat Spoiler (tombol Buka Tutup)" ini, mari kita cekidot berikut ini:

Awal cerita ada salah satu sobat Fayes Cool berkomentar di blog FCB ini, seperti berikut komentarnya cekidot:

Komentarnya antara lain seperti ini:
makasih infonnya sobat,,,
btw cara buat widget yang kaya "SPESIAL WIDGET" kaya punya sobat biar bisa kaya gitu gmana kodenya sob ??
thnx..

Sedangkan yang dimaksud SPESIAL WIDGET diblog ane adalah widget yang menggunakan kode spoiler didalamnya...

Spoiler (tombol Buka Tutup) ini banyak manfaatnya, penggunaanya bisa sebagai cara untuk menhemat halaman widget, atau untuk gambar dan lainnya.


Oke sob tombol spoiler mudah dibuat kalau kita sudah menpunyai kodenya. Kodenya seperti berikut ini:

<div><div style="margin-bottom: 2px;"><i><b><small></small></b></i><input value="BUKA" style="margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;BUKA&#39;; }" type="button" /></div>
<div style="border: 0px inset ; margin: 0px; padding: 0px;"><div style="display: none;">

Isi datanya Disini

</div></div></div>

Keterangan kode diatas:

1. Ganti kata BUKA yang ane block tebal sesuai kebutuhan, kodenya ada 2 ganti keduanya dengan nama yang sama supaya saat tombol di buka tutup tidak berubah ubah...
2. width: 180px adalah lebar dari pada tombol, kalau mau di lebarin tinggal tambah ankanya semisal jadi 300PX, kalau mau di kecilin tinggal kesebalikannya...
3. font-size: 12px adalah ukuran huruf (font)..
4. Isi datanya Disini ganti dengan data sobat...
   

Contoh hasil kode spoiler tersebut setelah disimpan, tombolnya akan seperti berikut ini:

Isi datanya Disini

Klik pada tombol Untuk membukanya...

Cara pemakaian di widget blogspot:
Login ke blogger - Tata letak - tambah gadget - pilih HTML/JavaScript - masukan kodenya - dan simpan. Contohnya mau diisi kode chatbox, kode gambar, statistik banner dll

Cara pakai di postingan:
Pada halaman postingan klik HTML baru masukkan kode. Untuk ngeceknya tidak harus dipublish dulu, cara cecknya bisa dengan pratinjau postingan...


Cara pasang di template:
Buka edit html template - jangan lupa simpan templatenya dulu untuk jaga-jaga kalau terjadi error - silahkan costum spoiler sesuai kebutuhan, experiment bagian mana yang mau di spoiler sendiri juga boleh. Namun yang pernah ane aplikasikan adalah pada bagian komentar....

Note: ada beberapa kode entah itu html atau javascript yang tidak support dengan spoiler ini, jadi selalu backup sebelum pemakaian. Dan check apakah berhasil atau tidak....

Demikianlah sharing ane tentang "Membuat Spoiler (tombol Buka Tutup)" di fayescool.blogspot.com ada salah apapun saya mohon maaf. Happy Blogging..

Posted by Fayes Cool » Rating 4.5 » at Saturday, March 31, 2012

Postingan Terkait

Blog tip N trik

• Cara Memasang Rating Bintang Rich Snippets Pada Blogspot
• Trik membuat tulisan berjalan (marquee)
• CONVERT CODE HTML, JAVASCRIPT, CSS, DAN SEJENISNYA
• Cara Memasang Link Pada sebuah Gambar
• Pengeditan Template Blogger Tampilan Baru Kurang Maksimal?
• Cara membuat Spoiler Di Komentar Blogspot
• Membuat spoiler di komentar treaded/bertingkat Blogspot
• Membuat spoiler di komentar Blogspot Non Treaded
• Ngerjain Autoblog Rssforward.com offpage
• Ngerjain Autoblog Yang Menforward Feed Kita
• Cara pasang Widget statistik Histats
• Review Komentar untuk Menambah Ide Postingan
• Test kecepatan web (GOOGLE PAGE SPEED ONLINE)
• Anti klik kanan mouse dan Keyboard tanpa script yang panjang
• Pasang widget follower/pengikut asli dan modifikasi sesuka hati
• Anti adblock 2.00 lindungi situs anda dari adblock
• Pasang tombol google +1 di wordpress dan blogspot
• Cara membuat link bergoyang dombret
• Membuat Sumber Otomatis bila ada yang kopas

Review Komentar

• Cara Memasang Rating Bintang Rich Snippets Pada Blogspot
• Cara membuat Spoiler Di Komentar Blogspot
• Membuat spoiler di komentar treaded/bertingkat Blogspot
• Membuat spoiler di komentar Blogspot Non Treaded
• Asal Mula Kata Cekidot di Blog Fayescool
• Update Avira AntiVir Personal Offline/Manual
• Tip Meningkatkan Links In Alexa
• Review Komentar untuk Menambah Ide Postingan
• Copypas artikel ngak ke indeks google?
• Lagi dan Lagi Backlink Bermasalah