Cara Membuat Spoiler di Postingan Blog

Cara Membuat Spoiler di Postingan Blog - Selamat siank sobat PPK ketemu lagi sama Admin RM yang ganteng ini. hehe.. kali ini admin RM akan share Cara Membuat Spoiler di Postingan Blog. tapi sebelum Admin RM kasih tau Cara Membuat Spoiler di Postingan Blog Admin RM jelasiin dulu apa itu Spoiler. 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.

Cara Membuat Spoiler Isi Teks

Klik Show Untuk Membuka Spoiler

Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks

Berikut Kode Spoiler Dengan Isi Teks


<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 :
[-] Ganti Kode yang berwarna merah dengan kata-kata yang sobat inginkan
[-] Sedangkan kode yang berwarna hijau adalah isi dari spoiler di atas

Cara Membuat Spoiler Isi Gambar

Spoiler :

Berikut kode spoiler Dengan Isi Gambar


<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>

Keterangan :
[-] Ganti Teks yang berwarna merah ganti dengan URL gambar sobat sendiri

Nah,Sekian artikel yang tentang Cara Membuat Spoiler di Postingan Blog nanti Admin RM akan share cara membuat Teks Area di Postingan Blog

Jika anda menyukai artikel Cara Membuat Spoiler di Postingan Blog dan ingin memosting artikel ini.

Bila Anda menjumpai BROKEN LINK atau LINK YANG RUSAK, silahkan berkomentar di bawah postingan pada kotak komentar yang disediakan.