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

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

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

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Sang Sembilan Satu Sinjai. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Sang Sembilan Satu Sinjai dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal