Latest News

Cara Buat Spoiler (Show/Hide) pada Blog



Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler. (berlaku juga untuk web)

Untuk lebih mudah saya beri contoh seperti dibawah ini :







isi spoiler... (bisa image/script/link/ato widget)





Dan spoiler ini bisa ditampilkan pada sidebar maupun di postingan. Ada yang tertarik untuk membuatnya, caranya mudah kok . . . silahkan coba langkah dibawah ini :

Untuk Sidebar :

Log-in dulu di account blog anda
Pada dashboar, pilih Layouts/Tata Letak
Klik Elemen Halaman dan pilih Add HTML/Script
Lalu paste kode dibawah ini :


<div><div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 spoiler... (bisa image/script/link/ato widget)

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

Untuk code bewarna merah, bisa anda ganti sesuai keinginan . .

Kayaknya cukup sampai disini, kalau ada pertanyaan silahkan komen aja dibawah . . .

0 Response to "Cara Buat Spoiler (Show/Hide) pada Blog"

share your opini, don't worry.. because you free to say anything