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