Untuk Menghindari Pemalsuan Sertifikat Resmi Lembaga Kursus Potensi Nusantara, Cek Status Alumni yang SAH Terdaftar Klik disini


AYO KURSUS KOMPUTER DAN TOEFL ONLINE (BUKTI PEMBAYARAN PESERTA KURSUS ONLINE) KLIK DISINI

TRYOUT TOEFL ONLINE GRATISS SERENTAK SEINDONESIA KLIK DISINI


IZIN KEMENDIKBUD REPUBLIK INDONESIA/ NOMOR INDUK LEMBAGA KURSUS NASIONAL: 07118.1.0035

Lembaga Kursus Potensi Nusantara Menawarkan Paket Kemitraan Berwirausaha (Kerjasama Membuka Cabang Lembaga Kursus Potensi Nusantara Baru)
Untuk Info lebih lanjut Klik Disini

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 Googlyaitu File Hosting Google Code
Selesai...

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

Klik Disini

PROGRAM KURSUS MASUK DESA
LEMBAGA PENDIDIKAN POTENSI NUSANTARA MEMBUKA KURSUS KOMPUTER ONLINE BERSERTIFIKAT, PAKET MICROSOFT OFFICE (WINDOWS,WORD,EXCEL,POWER POINT) DAN PAKET DESAIN GRAFIS (ADOBE PHOTOSHOP,COREL DRAW & ADOBE INDESIGN). BIAYA SANGAT TERJANGKAU, INFO LANJUT
KLIK DISINI

SERTIFIKATKAN KEMAMPUAN KOMPUTER KAMU TANPA IKUT KURSUS

TANGGAPAN PESERTA KURSUS