Cara Membuat Efek Spoiler Auto Hide di Blog, auto hide pada postingan, widget maupun yang lainnya pada blog sanyatlah menarik dan membuat tampilan blog kita makin simple dan keren. untuk blogger pemula tentunya ini sangat membuat bingung dan terkagum-kagum, spoiler atau auto hidetentunya tidak asing, karena banyak yang sudah menggunakan efek auto hide.
Karena banyak teman yang tanya tentang spoiler auto hide, maka kali ini saya share Cara Membuat Efek Spoiler Auto Hide di Blog. jadi sobat-sobat dapat langsung mencobanya. jika tertarik sobat bisa mncobanya diblog sobat, asalkan tidak diblog kang zain. hehhehe namun sebelumnya saya kasih contohdibawah ini :
- Login ke akun blogger dahulu.
- Buat Entri Baru/New Post = Membuat postingan
- Jika sudah, pada menu Entri, Pilih mode penulisan HTML (Bukan Compose) jika ingin menerapkan Spoiler/AutoHide. Jika dipasang pada Mode Compose maka tidak akan berfungsi code scriptnya.
- Lalu copas Script dibawah ini pada postingan yang akan dipasang autohide.
<div style="margin: 5px 20px 20px;">Catatan :
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau kode script (gambar atau video), link di sini <br>
</div>
</div>
</div>
Judul Spoiler : Silahkan sobat ganti sesuai keinginan sobat
Tutup dan Buka : petunjuk untuk melihatnya (bisa sobat ganti sesuai keinginan)
Letakkan teks atau kode script (gambar atau video), link di sini :sobat ganti tulisan tersebut dengan kata-kata sobat atau dengan kode script gambar atau viveo.
0 komentar
Berkomentarlah dengan Bahasa yang Relevan dan Sopan.. #ThinkHIGH! ^_^