Membuat Fungsi Spoiler di Postingan Blog [Open & Hide Content]

Beberapa hari yang lalu sempat ada sobat blogger yang bertanya pada saya tentang bagaimana Membuat Fungsi Spoiler di Postingan Blog [Open & Hide Content], karena secara Spoiler ini memiliki fungsi untuk menghemat tempat di area Page Post ketika kita ingin mengupload sebuah atau beberapa foto atau video, bisa juga untuk Teks dan Kode Script.

Sesuai dengan judulnya yang saya tambahkan dengan Open & Hide Content artinya pasti ada tombol navigasi berupa tombol klik untuk membuka (Open) dan menyembunyikan konten (Hide), jadi para pengunjung (pembaca) dimudahkan dalam mengaksesnya.

Oiya, dalam tutorial ini saya akan menampilkan 2 macam bentuk Fungsi Spoiler, nantinya teman-teman tinggal pilih sendiri bentuk mana yang ingin digunakan nanti:

Sewaktu akan memposting suatu artikel [login akun blogspot >> Posting >> New Post], sisipkan salah satu dari kode script Fungsi Spoiler di bawah ini:

a. Kode Script Style Spoiler Pertama,

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul Spoiler</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler (Bisa berupa foto, gambar, teks, kode HTML/Javascript)
</div></div></div></div>

Hasilnya akan menjadi seperti ini:

Demo Spoiler

Hanya untuk demo di blog anggasona-anotherbestblog

Note:
- Ganti tulisan yang saya beri warna merah dengan Judul selera teman-teman, misal dengan kata-kata Contoh, Demo, Foto atau Video,
- Ganti tulisan yang berwarna biru dengan isi Spoiler teman-teman,
- Apabila konten (isi Spoiler) berupa Foto, maka terlebih dahulu diupload bisa melalui Photobucket atau Tinypic, lalu copy paste kode HTML nya (Embed Code) dan masukkan ke dalam isi Spoiler,
- Untuk konten berupa video ambil Embed Codenya dan masukkan ke dalam isi Spoiler.

b. Kode Script Style Spoiler Kedua,

<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">
Isi Spoiler (Bisa berupa foto, gambar, teks, kode HTML/Javascript)
</span></div></div></div></div></div>

Hasilnya akan seperti di bawah ini:

Hanya untuk demo di blog anggasona-anotherbestblog

Note:
- Apabila konten (isi Spoiler) berupa Foto, maka terlebih dahulu diupload bisa melalui Photobucket atau Tinypic, lalu copy paste kode HTML nya (Embed Code) dan masukkan ke dalam isi Spoiler,
- Untuk konten berupa video ambil Embed Codenya dan masukkan ke dalam isi Spoiler.

NB: Jika ingin mengupload sebuah foto yang nantinya akan dimasukkan ke dalam isi Spoiler sebaiknya sebelum di upload di kecilkan terlebih dahulu ukuran lebar dan tingginya (disesuaikan saja) dengan perhitungan untuk lebar dari gambar/foto sekitar 10 cm agar hasilnya maksimal (tidak berat untuk loadnya).

Ok teman-teman, seperti itulah Cara Membuat Fungsi Spoiler di Postingan Blog [Open & Hide Content], semoga cara ini bisa sedikit menghemat tempat di blog teman-teman, semoga bermanfaat dan selamat mencoba. Salam.