Cara Membuat Spoiler Di Blog

Cara Membuat Spoiler Di Blog - Kali ini saya akan kasih trik lagi tentang tutorial blog, Yaitu cara membuat Spoiler di 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. Dan kali ini saya akan berbagi trik tentang bagaimana cara membuat spoiler di blog.

Fungsi dari Spoiler itu sendiri adalah merupakan cara yang di gunakan untuk menyembunyikan suatu element sperti: link, teks, gambar atau 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, 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.

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.

Spoiler juga dapat di terapkan pada blog Blogger dan Wordpress. Caranya membuat atau memasangnya di 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 di Blog

Cara membuat spoiler di 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 Posting Blog, Silahkan Sobat tambahkan kode diatas pada teks editor tampilan HTML post.
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 di Blog

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

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

Contoh:

Catatan:

Cara membuat Spoiler pada Homepage atau Halaman Blog, Silahkan sobat tambahkan kode diatas pada mode HTML/JavaScript.
Cara membuat Spoiler pada Posting 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 di Blog

Cara membuat spoiler untuk menyembunyikan Video di 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>

Contoh:

Catatan:

Cara membuat Spoiler pada Homepage atau Halaman Blog, Silahkan sobat tambahkan kode diatas pada mode HTML/JavaScript.
Cara membuat Spoiler pada Posting Blog, Silahkan Sobat tambahkan kode diatas pada teks editor tampilan HTML post.
Ganti teks tulisan warna HIJAU, dengan Separator Object Video yang sobat inginkan.

Demikian trik Tutorial Blog tentang Cara membuat Spoiler di Blog, Semoga bisa sangat bermanfaat untuk Sobat KUCOPAS semuanya.

| Supported by http://kuc0pas.blogspot.com |