Membuat Spoiler Pada Postingan Di Blog

Cara membuat Spoiler pada postingan blog. Ya, ini hanya buat dokumentasi saja saya tulis di blog ini. Karena saya juga memiliki blog yang bertemakan gambar. Agar terkesan lebih rapi dan mengurangi pada saat proses loading seningga menjadi ringan. Spoiler bisa anda masukkan dengan kode, gambar, video atau kode html.

Cara Membuatnya seperti di bawah ini :

1. Buat sebuah postingan yang sobat inginkan.
2. Jika ingin menggunakan Spoiler untuk gambar, klik Tab Edit HTML.
3. Letakkan kode dibawah ini untuk membuat Spoiler.

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b> gambar : <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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;">Isi dari Spoiler<br /> </div></div></div>

Contoh Spoiler dengan gambar.

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> gambar : <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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpV-JJ9FyMUkzA6-R9Qu7DJ3TdhBwHk6ie362J9UMzcls3maq5QRMeJYRYdd0ShICV7Utl68jKeWXsTOs-bylaDU324O6CvPX8WGk0up1ypB9LwvhN-ja0qOK-2cxCvSgm9XPN5DLztYc/s1600/windows-7-blue-orange-black-wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpV-JJ9FyMUkzA6-R9Qu7DJ3TdhBwHk6ie362J9UMzcls3maq5QRMeJYRYdd0ShICV7Utl68jKeWXsTOs-bylaDU324O6CvPX8WGk0up1ypB9LwvhN-ja0qOK-2cxCvSgm9XPN5DLztYc/s1600/windows-7-blue-orange-black-wallpaper.jpg" /></a>

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

Hasil

Spoiler gambar :

Huruf yang bercetak biru bisa anda ganti.

4. Coba di preview dahulu untuk melihat hasil postingan.
5. Setelah selesai publikasikan postingan sobat.

Selamat mencoba, and Keep Blogging.

Kategori: Blogger Trik

Rekomendasi Lainnya