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.
5 komentar:
Mantep gan... ntar ane coba,,,
eh, gan... ajarin buat smiles kaskus di blog?
Sudah saya folow juga blognya gan... thanks
wah maksih bnyak gan . . .
tkyu gaN :17
tapi ane mo bwt chatbox nya itu nymping :31
gan, kalo punya agan kan di post bisa di spoiler, nah kalo pake html kan cuma 1x pemakaian?
Posting Komentar
Yang dah mampir di Blog Ane Jangan Lupa ninggalin KOmen ea gan.