Kali ini ane membahas tentang cara membuat tombol hide-show atau juga lebih dikenal dengan istilah spoiler kaya spoiler di KASKUS gan. manfaat dari tombol hide-show atau spoiler ini adalah untuk menyingkat suatu tampilan fitur atau objek lain. Misalnya saja Agan² punya artikel yang panjaaang sekali, dan takut kalau para pembaca nantinya merasa jenuh, nah Agan² bisa menggunakan tombol spoiler ini, untuk menyingkat beberapa dari bagian artikelnya Agan². Selain itu tombol spoiler ini tidak hanya berguna untuk tulisan atau teks, akan tetapi juga berguna untuk gambar, serta objek-objek yang dapat ditampilkan di blognya Agan² yang menggunakan jasa javaScript/ kode HTML. Nah kalau penasaran apa itu spoiler, bisa tuh langsung melihat contoh tampilan berikut ini,Cekidot gan:
Bagaimana, baguskan gan?
Untuk membuat tombol spoiler, kita hanya membutuhkan script berikut ini gan:
Ikuti langkah-langkahnya
Bagi Agan² yang belum tahu cara memasangnya, bisa dilakukan melalui langkah-langkah berikut ini:
NB : tulisan tg bercetak tebal silahkan ganti dgn kata2 agan,terserah mau di ganti apa.
Untuk membuat tombol spoiler, kita hanya membutuhkan script berikut ini gan:
Ikuti langkah-langkahnya
Bagi Agan² yang belum tahu cara memasangnya, bisa dilakukan melalui langkah-langkah berikut ini:
- Login ke Blogger.com.
- Klik Tata Letak.
- Klik Tambah Gadget/Add Gadget
- Pilih HTML/JavaScript.
- Masukkan kode berikut ini, dan jangan lupa klik Simpan.
<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Show" 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: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
ISINYA DI SINI MAU DI TAROH GAMBAR ATAU SCRIPT APA JA BISA GAN,UP TO YOU DAHHH
</div></div></div></div>
NB : tulisan tg bercetak tebal silahkan ganti dgn kata2 agan,terserah mau di ganti apa.