Membuat Tombol Spoiler

Diambil dari Diary Osi dan blog Seby-Antoe

Spoiler atau biasa disebut tombol otomatis banyak sekali manfaat yang bisa di ambil dari tombol spoiler tersebut. Fungsi spoiler pada blog, mempercantik penataan blog, menghemat tempat, mempersingkat loading blog.

Spoiler juga dapat di gunakan saat membuat posting video atau gambar dan lainnya, dengan maksud agar saat para pembaca yang ingin membaca artikel kita, tidak membutuhkan waktu yang lama untuk loading ke artikel tersebut.
Cara membuat Spoiler sangatlah mudah, anda tinggal copy dan paste kode spoiler di bawah ini.

<center><div style="border: 0px inset green; padding: 0px;"><div><button class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Click to show the spoiler." type="button"><span style="color:black;"><span style="color: rgb(0, 102, 0); font-weight: bold;"><blink>J U D U L S P O I L E R</blink></span></span></button></div><div id="spoiler" style="display: none;"><span style="font-weight: bold; color: rgb(0, 102, 0);">



KODE SCRIPT BUKU TAMU, ATAU KODE GAMBAR/VIDEO, ATAU KODE SCRIPT YANG INGIN DI TAMPILKAN DALAM BENTUK SPOILER LETAKKAN DI SINI.


</span></div></div></center>

Untuk mengatur warna rgb teks spoiler yang di inginkan silahkan ke Google

Untuk membuat spoiler teks tidak berkedip, anda tinggal hapus kode <blink> dan </blink> pada kode spoiler di atas.

Satu hal lagi yang sangat perlu anda perhatikan, jangan lupa untuk mengganti teks
" J U D U L S P O I L E R " sesuai dengan yang anda inginkan

Oh yaaa..... satu hal lagi yang sangat mutlak dan wajib adalah, jangan lupa di save setelah selesai bikin spoiler.

Membuat Menu Auto-Hide ( Spoiler )

Cara untuk membuatnya adalah :

1. Login to Blogger kemudian pilih "Layout"

2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah).

3. Copy Paste Script yang ada di bawah ini :

<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
TARUH SCRIPT / KONTEN KALIAN DISINI
</div></div></div></div></div>

Keterangan :

+ Tulisan yang berwarna merah bisa Anda ganti sesuai keinginan.
+ Yang berwarna hijau adalah tempat untuk meletakkan konten / script widget Anda.
4. Klik Simpan dan selesai.
Selamat mencoba dan semoga bermanfaat ...