Cara Membuat Efek Spoiler Auto Hide di Blog

Home » » Cara Membuat Efek Spoiler Auto Hide di Blog



5 komentar

Cara Membuat Efek Spoiler Auto Hide di Blog



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 hide tentunya 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 contoh dibawah ini :

Gambar Jamur 3D:
photo article_zps27e14535.png
HUMOR (Guru bertanya cita – cita kepada muridnya):
Guru : “Dillah cita- cita kamu apa..?”
Dillah : “jadi polisi bu, kalau ada penjahat yg ganggu ibu aku bisa menembak dan nangkap mereka..! gratis untuk ibu”
Guru : “Dillah ibu jadi terharu, Ferdi kamu jadi apa..?”
Ferdi : “jadi dokter bu, kalau penjahat melukai ibu bisa ku rawat, buat ibu gratis..!”
Guru : “ibu jadi sangat terharu , kalau kamu otong mau jadi apa..?”
Otong : “Tukang gali kubur bu.! kalau Dillah tidak berhasil menangkap dan penjahat berhasil melukai dan ferdi gak berhasil merawat ibu dan ibu meninggal. kan sudah ku sediain kuburan.. Gratistististis untuk ibu.”
Guru dengan kesal dan berkata: “Dasar kampret keluar dari ruangan sekarang..” Hahaha….

Nah,,, gmana sudah coba contoh diatas? jika sobat tertarik, ikuti langkah berikut ini Cara Membuat Efek Spoiler Auto Hide di Blog :

  1. Login ke akun blogger dahulu.
  2. Buat Entri Baru/New Post = Membuat postingan
  3. 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.
  4. Lalu copas Script dibawah ini pada postingan yang akan dipasang autohide.

<div style="margin: 5px 20px 20px;">
<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>

Catatan :

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.

sudah selesai sobat,,, waktunya praktek. hehehe sekian dulu share Cara Membuat Efek Spoiler Auto Hide di Blog kali ini semoga bermanfaat. sobat ingin tutorial lengkap klik disini. atau ingin mempercantik blog DISINI.

Sumber:
http://www.abyfarhan.com/2013/01/cara-membuat-spoiler-autohide-di-blog.html




Cara Membuat Efek Spoiler Auto Hide di Blog





.
Share this article :