Cara membuat spoiler pada postingan blog, seperti contoh gambar diatas itulah kurang-lebih bentuk dari tampilan spoiler yang akan kita bahas pada artikel kali ini. Tetapi sebelum kita melanjut ke cara untuk membuat spoiler pada postingan blog ada baiknya kita mengetahui terlebih dahulu apa arti dari spoiler yang akan kita bahas ini.
Spoiler merupakan sebutan yang sering digunakan untuk cara menyembunyikan teks, video, gambar maupun script dengan tujuan untuk menghemat ruang postingan. Selain itu dengan fungsinya tersebut spoiler juga dapat dimanfaatkan untuk mempercepat loading pada suatu blog atau website.
Langsung saja kita pelajari cara dan kode untuk membuat spoiler ini :
- Login ke Blogger
- Buat Postingan baru seperti biasa, dan pilih isi postingan yang ingin kita buat menjadi spoiler bisa berupa teks, video, gambar maupun script
- Pindah dari Tab Compose pada postingan blog ke Tab HTML
- Silahkan teman-teman memasukkan kode dibawah ini pada Tab HTML dan jangan lupa ikuti petunjuk yang ada untuk membuat spoiler, Maksudnya teman-teman harus cermat membaca kode spoiler dibawah ini, jadi tempatkan kode spoiler yang ada sebelum teks, gambar, video ataupun script yang ingin disebunyikan jika sudah tutup script dengan menggunakan fungsi </div> biasanya sebanyak 3x seperti contoh yang ada 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: #FAFAF7; 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/AVvXsEj7VZQI08eHLsc2ndgsQ9LJWXw16U1QHKixtmnja3bxzaAPqAMdfAin7-6odu5GQJYV-0cD6j9RTDzJaP58W80jscKwjpbVHIA-1Yr9zrIz_0yBM_LKCgJYdbAG-anCVLRTFPKe4zgpZE7K/s1600/Spoiler-Blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7VZQI08eHLsc2ndgsQ9LJWXw16U1QHKixtmnja3bxzaAPqAMdfAin7-6odu5GQJYV-0cD6j9RTDzJaP58W80jscKwjpbVHIA-1Yr9zrIz_0yBM_LKCgJYdbAG-anCVLRTFPKe4zgpZE7K/s1600/Spoiler-Blog.jpg" /></a></div>
</div>
</div>
</div>
<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: #FAFAF7; 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/AVvXsEj7VZQI08eHLsc2ndgsQ9LJWXw16U1QHKixtmnja3bxzaAPqAMdfAin7-6odu5GQJYV-0cD6j9RTDzJaP58W80jscKwjpbVHIA-1Yr9zrIz_0yBM_LKCgJYdbAG-anCVLRTFPKe4zgpZE7K/s1600/Spoiler-Blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7VZQI08eHLsc2ndgsQ9LJWXw16U1QHKixtmnja3bxzaAPqAMdfAin7-6odu5GQJYV-0cD6j9RTDzJaP58W80jscKwjpbVHIA-1Yr9zrIz_0yBM_LKCgJYdbAG-anCVLRTFPKe4zgpZE7K/s1600/Spoiler-Blog.jpg" /></a></div>
</div>
</div>
</div>
Note : Ganti kode script yang berwarnah merah dengan text, video, gambar ataupun script lain yang ingin teman-teman sembunyikan. Pada contoh kode script diatas script spoiler saya guanakan untuk menyembunyikan gambar spoiler-blog yang ada diatas. Silahkan teman-teman lihat contoh hasilnya dibawah ini :
Jadi untuk mempermudah teman-teman dalam membuat spoiler ini, sebaiknya teman-teman membuat postingan teks, gambar, video ataupun script yang ingin disembunyikan pada Tab Compose terlebih dahulu, jika sudah selesai barulah teman-teman masuk ke Tab HTML lalu menggunakan kode Spoiler yang telah dibagikan diatas untuk menyembunyikan postingan yang telah dibuat sebelumnya.
Sekian artikel mengenai "Cara Membuat Spoiler Untuk Menyembunyikan Teks, Gambar, Video, Maupun Script Pada Postingan Blog", Semoga bermanfaat dan berguna untuk teman-teman yang sedang mencari fungsi spoiler ini. Jika ada yang ingin ditanyakan tentang cara membuat spoiler ini silahkan teman-teman berkomentar pada kolom komentar yang telah disediakan dibawah.
Slahkan berkomentar di bawah ini...
EmoticonEmoticon