Membuat Kotak Spoiler di Posting Blog Bloger Aceh

Bloger Aceh adalah Blog tentang Tip, Trik dan Tutorial Blogger dalam mempercantik blog

22 January, 2013

Membuat Kotak Spoiler di Posting Blog

buka dan tutup box
Halo sobat blogger, pernah lihat posting yang tersembunyi dan terbuka bila diklik? nah itu namanya spoiler box. kali ini blogeraceh akan membagikan sedikit tutorial tentang membuat kotak spoiler di posting blog. sebelum kita mulai membuatnya mari sama kita cek dulu kira-kira bagaimana tampilan nya saat kita publikasikan di blog sobat nantinya. coba sobat klik tombol buka dibawah.


Rahasia Perempuan:

Apa buka - buka? Tutup lagi :(

bagaimana sobat? udah ketemu rahasianya? : ) ok mari kita mulai.
  • pertama buatlah sebuah Posting atau Edit posting sobat.
  • saat berada dalam menu Entri klik HTML yang ada diatas bagian kiri. letaknya disamping Compose.
  • maka akan tampil kode-kode HTML posting sobat, trus Copy + Paste kode dibawah ke dalamnya.

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Rahasia Perempuan</b>: <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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Apa buka - buka? Tutup lagi :( <-- ganti dengan isi dari spoiler sobat

</div>
</div>
</div>
  • ganti tulisan berwarna merah dengan judul dari Spoiler sobat dan hijau dengan isi dari kotak spoiler baik berupa tulisan, gambar, video. jika sudah Save/publikasi.
Coba sobat lihat posting sobat tadi. Berhasil kan cara membuat kotak spoiler di posting blog yang blogeraceh bagikan? jika ya maka sempatkan 7 detik untuk tombol share di samping kiri artikel ini ya sob ^^
Happy blogging!

Labels:

0 Comments:

Post a Comment

Berkomentar sesuai Artikel Posting Blog,, jika ingin memasang link gunakan Tempat yang Blogeraceh Sediakan di Menu Link Exchange

Subscribe to Post Comments [Atom]