Membuat Spoiler di Blog (show)

Kang Ismet

Blogger Tutorial

Jumat, 20 Januari 2012

7 Komentar

Bagi sebagian Anda tentunya familiar dengan kata-kata spoiler, apalagi pengguna forum-forum seperti Kaskus. Spoiler berguna untuk menyembunyikan sebagian atau seluruh postingan, untuk menghemat space halaman posting. Spoiler bisa digunakan untuk menyembunyikan teks, gambar, kode html atau apa pun.

Bagi pengguna kaskus, tentunya berbeda kode antara kaskus dan web/blog. Langsung caranya aja gan... Pastikan ketika anda menulis postingan, dalam mode HTML, copy kode dibawah ini :

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler teks</b></i>: <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="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler
</div></div></div>

Ini contoh hasilnya

Contoh spoiler:

Apabila ingin menggunakan gambar, maka ganti teks dengan kode gambar.
Contoh kode gambar :

<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHNYAzuVEKerUrh7qYU_DbodGnQ0O7jZe3bcEkmNAHSkJ834ULa2Gihxd-KnfUyu5kixxCr6lapVGnqestCTvqJiS5ML-B_g8GxMFSCayGOghIouCRvW5yvgbsNwVh0_ES2LENLXTYP8/s1600/aspire3.jpg" />
</div>

Maka kode spoiler di atas menjadi

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler gambar</b></i>: <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="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHNYAzuVEKerUrh7qYU_DbodGnQ0O7jZe3bcEkmNAHSkJ834ULa2Gihxd-KnfUyu5kixxCr6lapVGnqestCTvqJiS5ML-B_g8GxMFSCayGOghIouCRvW5yvgbsNwVh0_ES2LENLXTYP8/s1600/aspire3.jpg" />
</div>
</div></div></div>

Maka hasilnya seperti ini:

Contoh spoiler gambar:

Ditunggu komennya gan....

Suka artikel ini? Bagikan :