Cara Membuat Spoiler di Blog
Cara Membuat Spoiler di Blog
Jika anda sering berkunjung ke forum-forum seperti kaskus, pasti sudah tidak asing lagi dengan kata-kata spoiler, bahkan mungkin anda sering menggunakannya. Yang menjadi pertanyaan bagaimana cara membuat spoiler di blog ?Spoiler merupakan cara yang digunakan untuk menyembukan suatu element sperti link, kumpulan link, kumpulan teks, gambar maupun video. Prinsip dari spoiler adalah buka tutup atau show hide, dimana jika spoiler dalam keadaan tertutup kemudian tombol spoiler di tekan maka element yang disembunyikan di dalam spoiler akan tampil, dan sebaliknya jika spoiler dalam keadaan terbuka kemudian tombol spoiler di tekan maka element yang ada di spoiler akan di sembunyikan.
Tujuan membuat spoiler adalah untuk menghemat space atau ruang didalam suatu postingan, selain itu penggunaan spoiler juga bermanfaat untuk mengurangi beban loading halaman/page apabila spoiler digunakan untuk menyembunyikan file gambar atau video. Spoiler pada blog juga dapat digunakan untuk menyembunyikan tombol social media share pada blog, jadi nanti tombol spoilernya di kasih kata-kata SHARE.
Selain forum seperti kaskus, penggunaan spoiler juga dapat di terapkan pada blog wordpress maupun blogger. Caranya sangat mudah, cukup dengan menambahkan script/kode pada halaman/page yang ingin ditampilkan.
Cara membuat spoiler untuk menyembunyikan teks
Cara membuat spoiler di blog wordpress maupun blogger untuk menyembunyikan teks dapat dilakukan dengan menambahkan kode berikut pada teks editor tampilan HTML post.
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input 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" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;">
<div style="display: none;">ini adalah tampilan spoiler untuk menyembunyikan teks</div>
</div>
</div>Cara membuat spoiler untuk menyembunyikan gambar
Cara membuat spoiler di blog wordpress maupun blogger untuk menyembunyikan file gambar dapat dilakukan dengan menambahkan kode berikut pada halaman teks editor tampilan HTML post.
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input 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" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;">
<div style="display: none;"><img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjL3blqgeOkynv4jHikXVAcPkhEcuaO0DLxux9azzpsvFIDfZCGwoWrKL4fdrsOI8Jaj92AaB0bX2rU34iIyCidqu3TtR0Jrj4rD3VDx39vTp7xhaFL_TeZ1mFBaan3MXaxmGUeG2mMs4/s320/monyet.jpg" alt="monyet" width="300" height="280" /></div>
</div>
</div>
Silahkan ganti url https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjL3blqgeOkynv4jHikXVAcPkhEcuaO0DLxux9azzpsvFIDfZCGwoWrKL4fdrsOI8Jaj92AaB0bX2rU34iIyCidqu3TtR0Jrj4rD3VDx39vTp7xhaFL_TeZ1mFBaan3MXaxmGUeG2mMs4/s320/monyet.jpg
menjadi url gambar yang ingin di sembunyikan.
menjadi url gambar yang ingin di sembunyikan.
Berikut adalah cara membuat spoiler di blog untuk menyembunyikan teks dan gambar. Apabila anda ingin menempatkan file video di dalam spoiler maka anda tinggal menambahkan sedikit modifikasi kode-kode diatas.
0 Comments
