Sabtu, 30 Agustus 2014

Membuat spoiler pada posting blog

Selamat datang pembaca....

Pembaca sudah pada tahukan apa itu spoiler?
Setelah kemarin saya bahas tentang cara membuat blogroll sekarang saya bahas spoiler...

Jika pembaca udah tahu silahkan tutup saja blog ini or diback aja ke halaman sebelumnya.. hehehe....
tapi, kalau belum tahu.. saya akan menjelaskan pengertian Spoiler menurut bahasa saya sendiri.
Spoiler adalah sebuah fungsi untuk menyembunyikan dan menampilkan sebuah posting berupa gambar, script, text, dan kawan-kawannya
Jelas?

langsung saja.... bentuknya seperti ini

Contoh Spoiler:
Candra Junie
My Mini Banner
Nah sekarang cara membuat spoilernya :
Caranya mudah 
  1. Silahkan pembaca menulis entri (artikel) seperti biasa di artikel editor pada blog.
  2. Ubah dari model Compose ke model HTML
  3. copy pastekan kode berikut

    <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 apapun di sini
     <br>
    </div>
    </div>
    </div>
  4. Ubah lagi ke Compose
  5. Selesai tinggal posting saja artikelnya nanti juga sudah jadi spoilernya.
======Keterangan======
Ubah tulisan yang berwarna merah sesuai keinginan pembaca.
Untuk width bisa dirubah ke auto jika ingin lebar spoiler sama dengan lebar postingan

Bagaimana? mudahkan?


bagi yang ingin membaca tentang cara membuat blogroll yang simpel bisa baca disini.....
Selamat mencoba semoga bermanfaat....

0 komentar:

Posting Komentar

 

Copyright © Wong Jowo Design by O Pregador | Blogger Theme by Blogger Template de luxo | Powered by Blogger