Cara Membuat Tombol Show Ke Dalam Postingan HTML

Apa itu tombol show atau hide spoiler. Show kalau kita artikan ke dalam bahasa Indonesia adalah tampilkan sedangkan hide adalah sembunyikan. Sesuai dengan namanya maka kalau kita klik tombol show maka suatu konten yang ada di dalamnya akan muncul sedangkan kalau kita klik hide maka konten tersebut akan merapat atau bersembunyi. Konten tersebut bisa berupa catatan atau bisa juga berupa gambar, dll.

Selain menggunakan sebuah text area atau juga highlighter maka show spoiler ini juga menjadi pilihan yang sering digunakan oleh para blogger untuk menyisipkan suatu kode ke dalamnya. Lebih dari itu show spoiler bukan hanya bisa disisipkan sebuah kode saja melainkan banyak kegunaan lainnya. Bagi yang tertarik silahkan langsung saja ke tutor cara membuat tombol Show Spoiler dibawah ini.

Kode

<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>
<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 style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
Tulis Kata-Kata Sobat Disini
</div></div></div>

Silahkan copy paste kode di atas ke laman postingan sobat dalam mode Html.

Tampilan

Apa Kabar Sobat Blogger ?

Jika sobat tidak suka dengan warna putih sobat bisa menggantinya dengan warna background sesuai keinginan. Inilah kode untuk Tombol Show Spoiler dengan background berwarna

Kode

<div id="spoiler">  
<div style="margin: 5px 20px 20px;">  
<div class="smallfont" style="margin-bottom: 2px;">  
<input 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'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div>  
<div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(225, 228, 242) none repeat scroll 0% 0%; border: 1px inset; margin: 0px; padding: 6px;">  
<div style="display: none;">  
Inilah hasil dari tombol show spoiler dengan background warna
</div>  
</div>  
</div>

Untuk contoh di atas adalah background: rgb (225, 228, 242) silahkan ganti dengan kode warna yang lain.

Tampilan

Tulis artikel di sini!

Kalau kita ingin memasukan sebuah kode javascript ke dalam isi dari show spoiler maka yang musti sobat lakukan yaitu rubah dulu kode javascriptnya ke kode lain, untuk hal ini sobat bisa menggunakan jasa web centricle.com/tools/html-entities untuk merubah kode. Nah jika bukan hanya tulisan yang ingin sobat masukan ke dalam show spoiler tersebut misalkan sobat ingin memasukan gambar yaitu buatlah sebuah URL gambarnya terlebih dahulu, untuk hal ini sobat bisa menggunakan jasa dari file hosting dari om Google yaitu File Hosting Google Code
Selesai...

Sertifikatkan kemampuan Komputer dan Bahasa Inggris anda
Sertifikat Komputer dan TOEFL tanpa ikut kursus, Ikuti Paket Ujian Saja
Klik Disini