Cara Membuat Spoiler di Blog

Spoiler.. Mungkin bagi sebagian orang sudah tidak asing lagi dengan yang namanya spoiler seperti... spoiler mobil yang biasanya ada di belakang mobil balap itu lho hehe.. Tapi yang akan kita bahas kali ini bukan spoiler mobil balap itu melainkan spoiler dalam konteks dunia internet. Bagi kalian yang sering nongkrong di forum-forum tentunya sudah mengetahui apa itu spoiler, namun bagi yang belum tahu saya akan jelasin sedikit. Spoiler adalah tombol yang digunakan untuk menyembunyikan konten berupa teks, gambar, video dan lain sebagainya, spoiler juga berfungsi untuk menghemat tempat yaitu apabila konten itu panjang sekali kita bisa menggunakan spoiler. Spoiler biasa digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu, untuk membukanya tinggal meng-klik tombol spoiler itu. Nah udah cukup penjelasannya, kali ini saya akan menjelaskan cara membuat tombol spoiler itu di blog, simak penjelasan di bawah ini..

Cara Membuat Spoiler di Blog

1. Pertama silahkan login ke dasbhor sobat

2. Silahkan buat postingan baru seperti biasa sobat melakukannya

3. Pada saat membuat postingan, pilihlah mode HTML

4. Lalu copas kode script di bawah ini

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Isi spoiler sobat di sini <br> </div> </div> </div>'/>

5. Sobat bisa mengganti Judul Spoiler sesuai keinginan sobat, begitu juga dengan tombol Open/Close bisa diganti dengan Show/Hide dan lainnya

6. Masukkan juga script konten yang akan sobat sembunyikan

7. Jika sudah silahkan publikasikan postingan sobat dan lihat hasilnya

8. Jika berhasil maka akan seperti ini

Hasilnya seperti ini:

Isi spoiler sobat di sini

Follow @aris_fz on Twitter for more info

Bagaimana, mudah bukan? Semua akan menjadi mudah bila Anda mau belajar. Jika ada yang ingin ditanyakan silahkan corat-coret di komentar. Oke sekian tutorial singkat ini, terima kasih telah berkunjung :)

Browse More Articles

Tweet

Written by Unknown

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.