Memasang fungsi spoiler (show and hide fungtion)

Salah satu cara mempercepat loading blog sudah diulas pada artikel sebelumnya di sini.

Mengenai apa itu fungsi Spoiler (show and hide fungtion), sobat bisa lihat di wikipedia, atau di artikel-artikel lainnya dan cari aja di google.com. Secara singkat fungsi spoiler dalam penggunaannya untuk web/blog dapat diartikan sebagai fungsi untuk menyembunyikan artikel,widget, atau fungsi-fungsi lain yang dapat dilihat atau ditampilkan (show and hide) apabila kita inginkan dengan cara mengklik fungsi spoiler tersebut baik berupa tombol maupun gambar,(kira-kira begitu deh).

O..ya sobat, fungsi spoiler ini juga yang saya rasakan adalah dapat juga dijadikan sebagai salah satu cara mempercepat loading blog apabila blog sobat banyak dipasang berbagai macam widget, gambar atau fitur lainnya seperti yang terlihat di blog saya ini.

Baiklah sobat sekarang saya ingin share ilmu aja bagaimana cara memasang fungsi spoiler seperti sobat lihat di blog ini.

Okay kita langsung aja, sobat copas aja kode di bawah ini

1. Bentuk spoiler pertama

ISI SPOILER SOBAT DENGAN GAMBAR ATAU APA AJA DI SINI

Copas aja kode di bawah ini

<div> <input style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button" value="Tampilkan" /></div> <div style="border: 0px solid #000000; margin: 10px auto; padding: 5px; background: #c9d2ed none repeat scroll 0% 0%; width: 500px;"> <div style="display: none;"> ISI SPOILER SOBAT DENGAN GAMBAR ATAU APA AJA DI SINI.</div> </div>

2.Bentuk Spoiler kedua

ISI SPOILER SOBAT DENGAN GAMBAR ATAU APA AJA DI SINI

Copas aja kode di bawah ini

<div style="border: 0px inset gray; padding: 1px;"><div style="text-align:center;" ><button type="button" class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Klik Aja" ><span style="color: rgb(0, 0, 0);" ><b>Ganti Dengan JUDUL SPOILER</b></span></button></div><div id="spoiler" style="display: none;"> ISI SPOILER SOBAT DENGAN GAMBAR ATAU APA AJA DI SINI</div></div>

3. Bentuk Spoiler ketiga

Judul Spoiler Anda

ISI SPOILER SOBAT DENGAN GAMBAR ATAU APA AJA DI SINI

Copas aja kode di bawah ini

<div><div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul Spoiler Anda </span></i><input value="Show" 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"/></div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> ISI SPOILER SOBAT DENGAN GAMBAR ATAU APA AJA DI SINI </div></div></div></div>

Keterangan dikit :
1. Ganti tulisan warna biru di atas sesuai dengan yang diinginkan sobat.
2. Isi dan Ganti tulisan warna merah di atas dengan artikel,gambar, atau apa aja yang diinginkan sobat.

Ok itu aja yah dan semoga bermanfaat.

Artikel yang berhubungan

Lihat semua postingan >>Di sini<<