Cara Menerapkan Spoiler pada Postingan Blog

Membuat spoiler pada sebuah postingan di blog bukan lagi menjadi hal yang sulit dilakukan Tentu bagi sebagian sobat Opedi sudah pe...

Membuat spoiler pada sebuah postingan di blog bukan lagi menjadi hal yang sulit dilakukan

Tentu bagi sebagian sobat Opedi sudah pernah mendengar atau bahkan tahu apa itu spoiler. Biasanya spoiler hadir di berbagai forum. Mereka yang sering bermain di forum-forum terkenal seperti kaskus misalnya, sudah mahir sekali dalam penggunaan spoiler ini. Lalu bagaimana jika sobat ingin menerapkannya di dalam sebuah blog? Sebelumnya penjelasan mengenai penerapan spoiler ke dalam sebuah blog ada baiknya Opedi  jelaskan secara singkat mengenai apa itu “Spoiler.” Spoiler adalah tombol buka/tutup yang digunakan untuk menghemat ruang tulisan sobat dengan menyembunyikan sementara sebuah konten seperti teks, foto atapun video. Contoh dapat dilihat di bawah postingan ini.

Selain untuk menghemat ruang, spoiler biasanya lebih sering dimanfaatkan untuk membuat para pembaca penasaran dengan apa konten yang terdapat dalam spoiler tersebut dan untuk melihatnya pembaca dapat mengklik tombol spoiler itu. Oke, tanpa basa-basi Opedi jelaskan bagaimana cara menerapkan spoiler pada postingan di blog. Simak yang berikut ini.

Cara Membuat Spoiler di Blog

Pertama, Login ke Blogger sobat.

Kedua, Pilih New Post atau Entri Baru (seperti membuat postingan biasa).

Ketiga, Buatlah postingan sobat.

Keempat, Sampai pada bagian postingan yang sobat hendaki untuk menerapkan spoiler ganti mode postingan dari compose menjadi Edit HTML.

Kelima, Gunakan kode script berikut di bawah ini (silahkan untuk di copy-paste):

spoiler script code

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>Judul Spoiler</b>: <input value="Buka" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Letakkan teks atau kode script (gambar atau video) di sini <br> </div> </div> </div>

Keenam, Perhatikan kode script di atas! Terdapat kalimat "Judul Spoiler" untuk judul, "Buka" untuk tombol perintah membuka, "Tutup" untuk tombol perintah menutup, dan "Letakkan teks atau kode script (untuk gambar atau video)" untuk teks, gambar atau video yang Sobat ingin letakkan dalam spoiler. Untuk kesemuanya tersebut Sobat dapat menggantinya sesuai dengan kehendak sobat.

Ketujuh, Klik Publish atau Terbitkan Entri jika sudah selesai.

Jika sobat mengikuti langkah-langkah di atas dengan benar maka contoh hasilnya akan seperti ini:

Paha Montok:

Sekian tips dari Opedi tentang cara membuat spoiler di dalam postingan blog, semoga bermanfaat salam sejahatera selalu.