Cara Memasang Spoiler

Hallo sahabat PKK, sudah lama semenjak postingan yang lalu berhasil diterbitkan. Kali ini gue mau kasih tau cara untuk membuat spoiler pada postingan blog. Sebelumnya pada tau gak apa itu spoiler? Kalo ada yang belum tau, simak baik-baik ya.. Tapi hal ini buat para master mungkin sudah jadi hal biasa. 

Spoiler pada blog adalah sebuah format bingkai yang digunakan untuk membingkai atau menyembunyikan teks, gambar, video maupun apa saja agar bisa disembunyikan di blog. Nantinya pengunjung bisa melihat isi spoiler tersebut dengan cara meng-klik tombol buka tutup atau "Show-Hide".

Spoiler ini bermanfaat untuk meringankan loading blog. Jika anda mengupload banyak gambar di postingan, maka anda sebaiknya memasukkan gambar-gambar tersebut ke dalam spoiler agar loadingnya blog menjadi ringan. Selain itu postingan anda akan tampak praktis dan keren.

Baik, langsung saja kita bahas bagaimana cara membuat spoiler seperti contoh dibawah ini.

Logo HFI:

Kode Script Spoiler :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Teks atau Kode Script (gambar/video)

</div>
</div>
</div>

Cara Memasang Spoiler :
Cara memasang spoiler sangat mudah, yakni :

• Upload gambar di entry baru seperti biasanya.
• Setelah gambar sukses terupload, buka HTML di entry baru (bukan Compose)
• Kemudian letakkan kode spoiler di tempat yang anda kehendaki, lalu pindahkan script gambar yang telah anda upload tadi ke tengah spoiler. Contohnya bisa anda lihat dibawah ini :
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">


<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKQ6eFpyOwYzo1mlw0ZbWmPv6pAI7BMk82mPgoOSxjrG1ooraTCQhQcfFaqpywSEmARoQPFbKstxNNcq0Q9dOa_X5Mfsqq38opRpQb4aq5b75YTubc9fCTe7ZrYT2-F4wyIp9ein4BC_o/s1600/hfi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKQ6eFpyOwYzo1mlw0ZbWmPv6pAI7BMk82mPgoOSxjrG1ooraTCQhQcfFaqpywSEmARoQPFbKstxNNcq0Q9dOa_X5Mfsqq38opRpQb4aq5b75YTubc9fCTe7ZrYT2-F4wyIp9ein4BC_o/s1600/hfi.png" /></a></div>


</div>
</div>
</div>

• Setelah selesai, klik Compose lalu postingan siap di Publish, dan tara.... spoiler anda selesai dibuat.

Mungkin seperti itu cara membuat spoiler, mudah bukan.

Demikian tadi cara membuat spoiler di blog, mudah mudahan berguna bagi kita semua.
Artikel ini hasil rujukan dari JuraganCipir.com

Terima kasih kunjungannya.

***

Read more ...