Fungsinya 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:
atau bisa juga seperti ini:
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:
lihat juga
Thursday, November 19, 2009
Membuat Tombol Hide dan show
JUDUL
Lainnya dari it, Tutorial Blog
Ditulis Oleh : gdfysx Hari: 1:58 AM Kategori: Tutorial Blog
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment