Thursday, November 19, 2009

Membuat Tombol Hide dan show

related posts, blog, blogger, blogger directory, blogspot, copy paste, do follow, do follow blog, do follow me, HTML, info, membuat blog, meta tag, pemula, script blogger, SEO, Tutorial BlogFungsinya adalah untuk menghemat pemakaian sidebar. Untuk membuat tombol hide dan show seperti Site Info blog ini sangat mudah. Ikuti caranya sebagai berikut:

Pertama login dulu ke akun blogger anda.

Pilih Dashboard dan klik Layout (tata letak) dan klik add widget (tambah widget)
Kemudian copy dan paste-kan kode berikut:



<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL</small></b></i><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;">

ISI (Terserah anda)

</div></div></div>



Maka akan terlihat seperti ini:

JUDUL



ISI (Terserah anda)



atau bisa juga seperti ini:




ISI (Terserah anda)



Yang harus anda lakukan untuk membuat seperti diatas yaitu:
Ganti tulisan "Show" yang warna hijau diatas dengan tulisan "Tampilkan"(kalimat awal tombol sebelum di klik).

Ubah tulisan Hide yang warna biru diatas dengan "Sembunyikan". begitu juga dengan Show ganti dengan "Tampilkan".

Sesuaikan ukuran tombol pada warna kuning diatas sesuai keinginan, misalnya 200px (sesuaikan dengan lebar sidebar anda).

Untuk menghilangkan kata judul diatas, hapus <i><b><small>JUDUL</small></b></i>

UPDATE:
Makasih buat sobat rumah blogger yang telah mengingatkan sebagai berikut:

Untuk menghilangkan garis tepinya. beri angka o pada warna coklat diatas. akan tampak sebagai berikut:





ISI (Terserah anda)



No comments:

Post a Comment