Pada posting sebelumnya saya share 'Cara Membuat Background Tetap Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Spoiler (Tombol Buka Tutup) Pada Dokumen HTML'.
Spoiler adalah sebuah konten yang secara default disembunyikan di dalam sebuah element dengan disertakan sebuah tombol untuk membuka dan menutup element tersebut sehingga konten yang ada didalamnya dapat di lihat. Tujuan dari digunakannya spoiler sangat beragam, mulai dari untuk membuat artikel supaya tidak terlihat terlalu panjang maupun untuk tujuan lainnya.
Baiklah berikut ini cara membuat Spoiler pada sebuah dokumen HTML.
Langkah-langkah:
Cara Membuat Spoiler Pada Dokumen HTML:
- Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.
- Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.
- Sekarang mari kita mulai untuk membuat Spoiler pada dokumen HTML seperti pada kotak di bawah ini.
- Ganti Judul Spoiler: sesuai dengan judul yang Anda kehendaki.
- Letakan konten yang akan dimasukkan di dalam spoiler seperti sebuah paragraf maupun file gambar tepat pada kata Letakan Konten Di Sini..!!.
- Silahkan download contoh cara membuat spoiler (Tombol Buka Tutup) dalam bentuk file HTML pada Link Di bawah ini.
Script Code:
<!DOCTYPE html>
<html>
<head>
<title> Cara Membuat Spoiler Pada Dokumen HTML </title>
</head>
<body>
<div>
<div style="margin-bottom: 5px;">
<span style="font-size: large; font-weight:bold;">Judul Spoiler:</span>
<input value="Buka" type="button" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }"></div>
<div style="margin: 0px; padding: 10px; border: 1px inset;">
<div style="display: none;">
Letakan Konten Di Sini..!!
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title> Cara Membuat Spoiler Pada Dokumen HTML </title>
</head>
<body>
<div>
<div style="margin-bottom: 5px;">
<span style="font-size: large; font-weight:bold;">Judul Spoiler:</span>
<input value="Buka" type="button" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }"></div>
<div style="margin: 0px; padding: 10px; border: 1px inset;">
<div style="display: none;">
Letakan Konten Di Sini..!!
</div>
</div>
</div>
</body>
</html>
Contoh Spoiler:
Keterangan
Apabila artikel ini bermanfaat bagi Anda, silahkan bagikan dan beri feed back pada kotak komentar di bawah. Terima Kasih!
0 Comments
