Cara Membuat Spoiler (Auto Hide) Di Blog

Kali ini saya mau membahas mengenai cara membuat spoiler (auto hide) di blog. Kotak spoiler ini seringkali ditemui di forum Kaskus, selain untuk menghemat tempat, kotak spoiler ini bermanfaat juga untuk mempercepat proses loading blog. Kotak spoiler bisa diterapkan di sidebar blog Anda maupun di dalam postingan blog Anda.


Spoiler ini bisa menyembunyikan teks, foto maupun video di dalam postingan di blog, sehingga lebih membuat artikel terlihat lebih ringkas. Selain itu juga tentunya akan membuat pembaca penasaran dengan apa yang ada di balik spoiler tersebut.

Langsung saja kita ikuti langkah berikut :

MEMBUAT KOTAK SPOILER DI DALAM POSTINGAN

1. Login ke akun blog Anda  disini 

2. Klik -> New Post -> untuk membuat artikel baru. (lihat gambar 1)

Gambar 1

3. Copy kode beriku ini :

 

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <input 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'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> Letakkan Teks, Image atau Video Anda Disini </div> </div> </div>

4. Paste kode tersebut ke dalam sebuah postingan, tapi pada mode HTML. (lihat gambar 2)
 

Gambar 2

5. Klik -> Publish apabila artikel sudah siap di tampilkan di blog.

6. Selesai.

PREVIEW :

MEMBUAT KOTAK SPOILER DI SIDEBAR BLOG

1. Login ke akun blog Anda disini

2. Klik -> Layout.

3. Klik -> Add Widget.

4. Klik -> Save.

5. Selesai.

Dengan kotak spoiler disebelah sisi kanan / kiri blog bisa digunakan untuk menempatkan daftar isi blog, ataupun widget-widget lainnya yang akan Anda bikin auto hide.

Baca juga artikel menarik lainnya :
- Cara Membuat Kode Warna di Blog
- Cara Membuat Deskripsi di Bawah Judul Postingan Pada Mesin Pencari
- Cara Mudah Membuat Daftar Isi di Blog

Nah itu tadi, cara membuat kotak spoiler (auto hide) di blog. Semoga bermanfaat dan selamat mencoba.