Home » » Tutorial : Membuat Show / Hide Button

Tutorial : Membuat Show / Hide Button



Assalamualaikum...hari ni caer nak berkongsi satu lagi tutorial yang caer sendiri telah aplikasikannya di dalam blog....fungsi button show / hide ni adalah bertujuan untuk menjimatkan ruang di dalam blog dan boleh make sure blog menjadi simple serta kemas...tutorial ni caer tujukan buat sahabat2 blogger terutama buat blogger PERGH yang telah request tutorial pagi tadi...hehe...jom cuba !!

1) Login blog >> dashboard >> design >> add a gadget >> HTML / javascript

2) Masukkan kod di bawah dalam ruangan yang disediakan
<center><div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Ketuk" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tutup&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Ketuk&#39;; }" type="button" />
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

( Korang boleh ubah perkataan "ketuk" dan "tutup" tu mengikut citarasa tersendiri )

3) Masukkan koding yang korang mahukan.Contohnya : shoutbox , post terkini etc

4) Masukkan koding di bawah ni sebagai penutup
</div></div></div></div></center>

5) Preview dan save jika sudah berpuas hati

P/s : sebarang pertanyaan boleh tinggalkan komen kat entri ni bagi memudahkan caer untuk membalas...selamat mencuba !!

7 comments:

putERi-kAtEk said...

gud job caer!!!!!!!! hehehehe

mohd sasuke said...

puteri katek : trimas ye..jom cube

Dawy said...

nice tutorial . bole cube nty :)

mohd sasuke said...

dawy : sila3 cube..hehe

MiZi said...

caer!!! datang cepat!! hahah akhirnya ko komen gak page aku.. naseb bek aku x majok.. har3

http://contengcorner.blogspot.com/2010/12/blog-baru-pengunjung-alhamdulillah.html

mohd sasuke said...

mizi : ok2..aku dtg ye mizi..hehe..

Uncle Osa said...

halo-halo.
tanya sikit boleh?
macam mana nak buat tab macam caer buat tab shout box kat sebelah kanan tu? mintak tunjuk ajar. makasih!

 
copyright reserved by caersasuke