Beranda · Menu · Menu 1 · Menu 2

Cara Membuat Spoiler Pada Blog dan Postingan

Spoiler merupakan salah satu cara untuk menyembunyikan sebuah elemen pada web atau blog, cara ini sering kali di jumpai pada sebuah forum gunanya untuk menghemat space/ruang pada sebuah halaman agar tidak memanjang ke bawah. Selain banyak dijumpai di forum-forum, banyak juga yang memanfaatkan untuk menyembunyikan widget pada blognya agar terlihat rapi.




Spoiler yang dimaksud sistemnya buka tutup, apabila ditekan button spoiler maka akan yang di dalamnya akan terbuka sebaliknya apabila di klik kembali maka akan tutup. Untuk membuat Spoiler tidaklah sulit hanya dengan menggunakan script pada halaman dimana spoiler ingin di tempatkan. Berikut kode/Script untuk membuat Spoiler

Spoiler untuk Text scriptnya seperti berikut


<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; 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" value="Buka" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;">
<div style="display: none;">Tuliskan text yang ingin di tempatkan dalam spoiler anda</div>
</div>
</div>

Ganti yang berwarna biru dengan text yang ingin di masukkan dalam spoiler, dan hasilnya akan sepertu berukut


Tuliskan text yang ingin di tempatkan dalam spoiler anda


Spoiler untuk gambar scriptnya seperti berikut



<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; 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" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;">
<div style="display: none;"><img class="aligncenter" src="Url/Link gambar yang ingin ditampilkan dalam Spoiler" alt="monyet" width="300" height="280" /></div>
</div>
</div>

Ganti yang berwarna biru dengan link/url gambar yang anda inginkan, dan contoh hasilnya akan seperti berikut


monyet

Gambar juga boleh ditambahkan lebih dari satu atau terserah berapa yang di inginkan, Script untuk gambar lebih dari satu seperti berikut



<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; 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" value="Buka" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;">
<div style="display: none;"><img class="aligncenter" src="Url/Link gambar pertama" alt="monyet" width="300" height="280" /><br/><img class="aligncenter" src="Url/Link gambar kedua" alt="monyet" width="300" height="280" /><br/><img class="aligncenter" src="Url/Link gambar ketiga" alt="monyet" width="300" height="280" /><br/><img class="aligncenter" src="Url/Link gambar keempat" alt="monyet" width="300" height="280" /><br/></div>
</div>
</div>

Ganti yang berwarna biru dengan url/link gambar yang diinginkan dan contoh hasilnya seperti berikut


monyet
monyet
monyet
monyet

Ok, demikianlah postingan kali ini semoga bermanfaat. Wassalam..!!!




Artikel keren lainnya:

1 Tanggapan untuk "Cara Membuat Spoiler Pada Blog dan Postingan"

  1. This comment has been removed by a blog administrator.

    ReplyDelete