May 19, 2012

Cara Membuat Spoiler di Postingan Blog

Spoiler adalah sebuah fitur dalam blog   fungsi utamanya adalah menyembunyikan teks, kode, kalimat atau gambar. Fungsi nya mirip dengan text area yaitu menghemat halaman posting agar tidak terlalu memanjang ke bawah. Saya yakin sobat sudah sering melihat di forum-forum bentuk sebuah spoiler, yaitu jika kita mengklik misalnya "show" atau "hide" atau "close" maka kita bisa melihat gambar / tulisan yang tersembunyi namun bisa dimunculkan.

Spoiler sering kali  dipasang pada sebuah halaman posting, namun ada juga yang memasukkan nya ke dalam sidebar atau footer untuk menyembunyikan widget tertentu. Pada tutorial ini kita akan ikuti cara membuat spoiler dengan isi tulisan dan spoiler dengan isi gambar di posting blogspot.

A. Membuat spoiler dengan isi teks



Klik Show Untuk Membuka Spoiler
Membuat spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks

Berikut kode spoiler di atas:

<div style="margin-bottom: 2px;">Klik Show Untuk Membuka Spoiler
<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Memasang spoiler di blog sangat mudah  Inilah kode untuk membuat spoiler dengan teks </div></div></div>

Keterangan;
  • Klik show untuk membuka bla bla bla bisa sobat ganti termasuk Show
  • Sedangkan kode berwarna biru adalah isi dari spoiler dengan teks. 

 B. Memasang spoiler dengan isi image atau gambar


    Spoiler :
    Post spoiler
    Kode spoiler untuk isi gambar di atas;

    <div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
    <b>Spoiler</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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
    <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
    <div style="display: none;">
    <img src="http://julak-project.googlecode.com/files/photos.png" border="0" alt="Post spoiler">
    </div>
    </div>
    </div> 
    Perhatikan cara memasang kode url gambar dengan teks warna biru. Ganti
    http://julak-project.googlecode.com/files/photos.png dengan alamat gambar sobat sendiri yang sudah dihost misalnya milik saya ini di google code.
    Bagaimana cara memasangnya di posting blog? Saat menulis artikel masuk ke menu  HTML bukan compose (lihat kiri atas) kemudian masukkan kode-kode diatas.

    Nah bagaimana Sobat blogger. Ternyata cukup mudah bukan membuat spoiler di postingan blog. Silakan dicoba.


    13 comments:

    1. biasanya ini hanya ada di forum2 ... ternyata sekarang sudah bisa di aplikatifkan ke blog ya... hheeuu hheeuu

      ReplyDelete
    2. terima kasih atas spoiler nya gan, saya jadi terbantu

      ReplyDelete
    3. wah terima kasih ya, bagus sekali bagi2 ilmunya....sangat membantu !?

      ReplyDelete
    4. Thank's gan, sangat membantu...
      coba lihat halaman saya, http://hamam-ngalam.blogspot.com/2012/06/gallery-hamam.html

      ReplyDelete
    5. Ngomong-ngomong, kalau di masukin spoiler tulisannya. Keindeks gak ya sama mesin pencarian?
      Blogwlking mas..

      ReplyDelete
    6. Gan... gimana caranya kalo tulisan "Open" diganti dengan gambar GIF ???
      Mohon solusinya...!!!

      ReplyDelete
      Replies
      1. waah belum ada experimen mas bro, nti dech klo ada lagi.

        Delete
    7. wah trims gan sempet bingung juga nih cara masukin gambar

      ReplyDelete
    8. Alhamdulillah akhirnya berhasil juga bikin spoiler, makasih ya gan wat informasinya. :D

      ReplyDelete
    9. terima kasih infonya,sangat membantu nih

      ReplyDelete
    10. mantap gan...ijin tak pake ilmunya yo...

      ReplyDelete

    Anda harus menjadi follower blog ini jika ingin memberikan komentar. Terima Kasih