Cara Membuat Spoiler Pada Postingan Blog

KUCOPAS - Cara Membuat Spoiler Pada Postingan Blog. Kali ini saya akan kasih trik lagi tentang tutorial blog, yaitu cara membuat Spoiler dipostingan blog. Ada sedikit pencerahan untuk sobat, jika mungkin sobat pernah berkunjung ke forum-forum online dunia cyber seperti kaskus atau yang lainya, pasti sobat sudah tidak asing lagi dengan yang namanya spoiler.

Fungsi dari Spoiler itu sendiri adalah merupakan cara yang di gunakan untuk menyembunyikan suatu element seperti, link, teks, gambar atau juga video. Prinsip dari spoiler adalah sistimnya buka tutup atau show hide, karena jika spoiler dalam keadaan tertutup, lalu tombol spoiler di klik atau di tekan maka element yang di sembunyikan di dalam spoiler itu akan tampil atau terbuka dengan sendirinya, begitu juga sebaliknya jika spoiler dalam keadaan terbuka lalu kemudian tombol spoiler di klik atau di tekan maka element yang ada di dalam spoiler akan di sembunyikan atau tertutup kembali.

Tujuan dari membuat spoiler adalah untuk menghemat tempat, ruang atau space di dalam suatu postingan blog. Selain itu menggunaan spoiler juga bermanfaat untuk mengurangi beban loading halaman blog apabila spoiler di gunakan untuk menyembunyikan file foto, gambar atau video yang tentunya menguras bandwidth data internet.

Spoiler juga dapat di terapkan pada blog Blogger dan Wordpress. Caranya membuat dan memasangnya dipostingan blog sangatlah mudah, karena sobat hanya cukup dengan menambahkan Kode Script pada halaman atau page yang ingin di pasangi spoiler.

Cara membuat Spoiler untuk menyembunyikan teks atau tulisan dipostingan Blog

Cara membuat spoiler dipostingan blog untuk menyembunyikan teks, silahkan sobat Copy dan Paste atau tambahkan kode dibawah ini.

<div style="margin: 5px;">
<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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">Isi teks atau tulisan sobat di sini</div>
</div>
</div>

Catatan:

Cara membuat Spoiler pada Homepage atau Halaman Blog, silahkan sobat tambahkan kode diatas pada mode HTML/JavaScript.
Cara membuat Spoiler pada postingan Blog, silahkan sobat tambahkan kode diatas pada teks editor tampilan mode HTML dan bukan Compose.
Ganti teks tulisan warna BIRU ( Isi teks atau tulisan sobat di sini), dengan teks atau tulisan yang sobat inginkan.

Contoh spoiler untuk menyembunyikan teks atau tulisan. (Klik saja sobat.!!!)

Cara membuat Spoiler untuk menyembunyikan Gambar atau Foto dipostingan Blog

Cara membuat spoiler di blog untuk menyembunyikan Gambar atau Foto dipostingan Blog, silahkan sobat Copy dan Paste atau tambahkan kode dibawah ini.

Contoh Spoiler untuk menyembunyikan Gambar atau Foto. (Klik saja Sobat.!!!).

Catatan:

Cara membuat Spoiler pada Homepage atau Halaman Blog, silahkan sobat tambahkan kode diatas pada mode HTML/JavaScript.
Cara membuat Spoiler pada Postingan Blog, silahkan Sobat tambahkan kode diatas pada teks editor tampilan HTML post.
<>Ganti teks tulisan warna PINK, dengan alamat URL Gambar atau Foto yang sobat inginkan.

Cara membuat Spoiler untuk menyembunyikan Video dipostingan Blog

Cara membuat spoiler untuk menyembunyikan Video dipostingan Blog, silahkan sobat Copy dan Paste atau tambahkan kode dibawah ini.

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Contoh:</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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

<div class="separator" style="clear: both; text-align: center;">
<object class="BLOG_video_class" contentid="209a1b1ea11d2563" height="226" id="BLOG_video-209a1b1ea11d2563" width="320"></object></div>

</div>
</div>

Catatan:

Cara membuat Spoiler pada Homepage atau Halaman Blog, silahkan sobat tambahkan kode diatas pada mode HTML/JavaScript.
Cara membuat Spoiler pada Postingan Blog, silahkan sobat tambahkan kode diatas pada teks editor tampilan HTML dan bukan Compose.
Ganti teks tulisan warna HIJAU, dengan Separator Object Video yang sobat inginkan.

Demikian trik tutorial blog yang mengulas tentang Cara membuat Spoiler Pada Postingan Blog, semoga bisa sangat bermanfaat untuk sobat KUCOPAS semuanya.