Beranda / blogspot

CARA MEMBUAT SPOILER PADA POSTINGAN BLOG

Oleh Hengki Kristianto
cara membuat spoiler pada postingan blog
Cara Membuat Spoiler Pada Postingan Blog ~ Sebuah gambar ataupun kode script panjang yang dirasakan dapat mengganggu pandangan pengunjung dapat diakali dengan cara disembunyikan menggunakan tehnik spoiler.  Dengan kata lain penggunaan spoiler pada artikel akan menambah kerapihan postingan blog bahkan mempercantik blog.

Selain menggunakan spoiler, Anda dapat juga menggunakan tehnik menu scroll untuk mempersingkat ruang tampilan tersebut. Silahkan baca cara membuat menu scroll untuk mendapatkan informasi lebih lanjut.

Berikut ini contoh spoiler yang biasa digunakan :

Judul
Cara Membuat Spoiler


Terlihat lebih rapi dan bersih untuk ditampilkan dalam artikel bukan ? Bayangkan saja jika harus menampilkan gambar yang banyak ataupun script yang panjang tentu akan terasa kurang rapi dan memakan tempat yang lebar juga.

CARA MEMASANG SPOILER DI POSTINGAN BLOG

.Jika Anda ingin menggunakan tehnik spoiler di dalam artikel Anda maka berikut ini langkah-langkahnya.

1. Masuk ke Entri postingan yang ingin di pasang spoiler
2. Pada menu postingan, Klik Tab HTML ( jangan compose )
3. Tentukan posisi spoiler yang ingin ditampilkan
4. Copy dan Paste kan script di bawah
5. Ganti "Judul" sesuai dengan keinginan ( teks warna biru )
6. Letakkan gambar atau kode script yang ingin disembunyikan di "isi Teks di sini"(teks warna merah)
7. Silahkan simpan dan pratinjau postingan


cara membuat spoiler pada postingan blog

Script Membuat Spoiler

Script Membuat Spoiler
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 65px; " 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"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi Teks di sini
</div></div></div></div>
Ok demikian saja postingan singkat cara membuat spoiler di postingan blog, Semoga dapat memberikan manfaat. Salam sukses