Cara Membuat Spoiler Di Blog

Bagi Seorang blogger (pengguna blog), spoiler memiliki peranan yang peting. Spoiler merupakan salah satu fitur di dalam blog yang mempunyai fungsi utama menyembunyikan text, gambar, kode atau kalimat. Jadi jika kita perhatikan, fungsinya mirip dengan Text area, yaitu menghemat halaman posting agar tidak terlalu memanjang kebawah. Nah, berikut contoh dan cara penggunaannya :


Berikut Kode Spoiler Diatas :

<div style="margin-bottom: 2px;">
<b>Klik Show Untuk Membuka</b>
<div style="margin-top: 5px; text-align: center;">
<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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin-top: 5px; width: 60px;" type="button" value="Show" /> </div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Contoh tampilan spoiler, berikut cara Memasang spoiler di blog untuk membuat spoiler dengan teks </div>
</div>
</div>

Keterangan:
(Klik show untuk membuka) bisa Anda ganti termasuk "Show"
Sedangkan kode berwarna Hijau Salem dengan cetak tebal adalah isi dari spoiler dengan teks yang dapat di ganti sekehendak hati kita.
Cara membuatnya, masukkan kode script diatas di potingan blog yang akan kita bubuhi tampilan Spoiler di pilihan "HTML"dan selesai. Mudah bukan, segera aplikasikan untuk mencikutobanya.

Selanjutnya "Untuk Spoiler Yang Berisi Image atau Gambar" seperti di bawah ini :

Berikut kode scriptnya :


<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> : <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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: center;">
<div style="display: none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOgT257FShrzM2tLUMZt5r6u2UO11VM0NvJYRaI-g0v8I9rsbzSu9wG5L7FFfT-_kmS5XvRcOXH-1Eqi3cH4SdEFsl6OJKBZWz_4UBhgnV_rgKoSQcYdH_RK8uQGd0EMmNnzI6GbzfpfU/s1600/mas+admin.jpg" border="0" alt="Post spoiler">
</div>
</div>
</div>

Perhatikan kode script yang telah saya bold dan berwarna hijau salem di atas. Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOgT257FShrzM2tLUMZt5r6u2UO11VM0NvJYRaI-g0v8I9rsbzSu9wG5L7FFfT-_kmS5XvRcOXH-1Eqi3cH4SdEFsl6OJKBZWz_4UBhgnV_rgKoSQcYdH_RK8uQGd0EMmNnzI6GbzfpfU/s1600/mas+admin.jpg    dengan alamat gambar atau foto milik kita yang ingin kita publikasikan di spoiler yang telah di host misalnya milik saya yang telah saya publish di blog kemudian saya klik kanan selanjutnya saya ambil link yang ada di alamat URL nya.

Bagaimana cara membuatnya ? nah, cara membuatnya cukup mudah seperti tips membuat spoiler untuk text diatas, yaitu saat kita mau publish artikel masukkan kode script diatasyang telah saya blog berwarna di bagian yang kita inginkan, namun ingat "saat memasukkan script spoiler yang kita buat, lihat kiri atas dan pilih HTML bukan Compose". Dan setelah kode-kode tadi kita masukkan di format HTML bisa kita langsung publikasikan atau kembali ke Compose untuk melanjutkan mengisi postingan artikel yang kita buat dan selesai.

Cukup mudah bukan membuat spoiler untuk gambar atau image ? karena itu segera saja kita coba di blog yang kita miliki agar makin terampil membuatnya.