Jumat, 14 November 2014

Cara Membuat Tombol Show pada Postingan Blog

Dulu saya berfikir bahwa tombol show/hide pada artikel hanya bisa digunakan pada web atau situs berbayar, tetapi saya tetap mencari di google dan saya dapatkan beberapa cara untuk membuat tombol show atau tombol tampilkan/sembunyikan. Berikut saya akan membagi ilmu yang saya dapatkan tersebut kepada anda yang berkunjung diblog ini.

Caranya sangat gampang anda hanya copy script dibawah ini dan pastekan pada saat anda membuat tulisan baru. Untuk menggunakannya anda harus Entri HTML jangan pada Compose.
<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;">
GANTI TULISAN INI
</div></div></div>
Masukkan tulisanmu di sini

Anda bisa ganti warna merah dengan teks anda sendiri ganti warna biru sesuai dengan yang anda inginkan.

Jika anda melakukan sesuai dengan yang saya lakukan maka hasilnya akan seperti ini:
Klik show untuk melihat
GANTI TULISAN INI


Anda juga bisa mengganti tulisan dengan memasukkan gambar, contohnya:
Klik show untuk melihat

Terimakasih telah berkunjung semoga bermanfaat bagi kita semua, jangan lupa berkomentar.

Tidak ada komentar:

Posting Komentar