Vrydag 19 April 2013

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:
HUMOR (Guru bertanya cita – cita kepada muridnya):

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.

By : Yusuf Electric

Geen opmerkings nie:

Plaas 'n opmerking