Cara Menciptakan Hidangan Spoiler Pada Postingan Blogger

Cara Membuat Menu Spoiler Pada Postingan Blogger Ketika menampilkan gambar besar atau arahan 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 niscaya akan memperburuk SEO.

Hal menyerupai itu sanggup diakali dengan memasang spoiler di blog, yang seakan-akan menyembunyikan script atau gambar sampai ada yang menekan tombol spoiler tersebut untuk menampilkannya.

contoh spoiler

CARA MEMBUAT MENU SPOILER

Sebenarnya tehnik menyerupai ini sudah usang dipakai oleh para blogger, Dan saya kira tidak ada salahnya bila menulis ulang biar sanggup dipakai kembali bagi yang memerlukannya.

Berikut ini langkah-langkah menciptakan spoiler di blog :

• Masuk ke hidangan postingan (seperti biasa saat mau buat artikel)

• Tentukan posisi yang ingin diletakkan hidangan spoiler

• Klik Tab HTML ( sebelah compose )

baca juga artikel : cara menciptakan goresan pena 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 impian ( teks warna merah)

• Letakkan arahan script atau gambar yang ingin disembunyikan di bab " ISI SCRIPT / GAMBAR DI SINI" ( teks warna biru)

• Simpan / Save , Lakukan pratinjau terlebih dahulu untuk memastikan sesuai dengan posisi keinginan

Nah, Sekarang sudah tahu kan cara menciptakan hidangan spoiler ? Praktis sekali bukan ? Silahkan dicoba ... Salam sukses

Berbagi :