Cara Membuat Menu Spoiler Pada Postingan Blogger
Cara Membuat Menu Spoiler Pada Postingan Blogger ~ Ketika menampilkan gambar besar atau kode script yang panjang di artikel / postingan blog tentu akan sangat mengganggu pandangan mata pengunjung sehingga blog terkesan tidak rapi. Selain itu gambar / foto yang besar akan menambah berat loading blog yang sudah pasti akan memperburuk SEO.
Hal seperti itu dapat diakali dengan memasang spoiler di blog, yang seolah-olah menyembunyikan script atau gambar hingga ada yang menekan tombol spoiler tersebut untuk menampilkannya.
Sebenarnya tehnik seperti ini sudah lama digunakan oleh para blogger, Dan saya kira tidak ada salahnya jika menulis ulang agar dapat digunakan kembali bagi yang memerlukannya.
Berikut ini langkah-langkah membuat spoiler di blog :
baca juga artikel : cara membuat tulisan berjalan
Hal seperti itu dapat diakali dengan memasang spoiler di blog, yang seolah-olah menyembunyikan script atau gambar hingga ada yang menekan tombol spoiler tersebut untuk menampilkannya.
contoh spoiler
Sebenarnya tehnik seperti ini sudah lama digunakan oleh para blogger, Dan saya kira tidak ada salahnya jika menulis ulang agar dapat digunakan kembali bagi yang memerlukannya.
Berikut ini langkah-langkah membuat spoiler di blog :
- Masuk ke menu postingan (seperti biasa ketika mau buat artikel)
- Tentukan posisi yang ingin diletakkan menu spoiler
- Klik Tab HTML ( sebelah compose )
baca juga artikel : cara membuat tulisan berjalan
- Copy dan Letakkan script di bawah ini pada bidang yang diinginkan
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">JUDUL</span></i><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="margin: 0px; padding: 0px; width: 65px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SCRIPT / GAMBAR DI SINI
</div></div>
</div></div>
- Ganti "JUDUL" sesuai dengan keinginan ( teks warna merah)
- Letakkan kode script atau gambar yang ingin disembunyikan di bagian " ISI SCRIPT / GAMBAR DI SINI" ( teks warna biru)
- Simpan / Save , Lakukan pratinjau terlebih dahulu untuk memastikan sesuai dengan posisi keinginan