August 9, 2011

tutorial: show/hide button for content

السلام عليكم

credit to sumber

Alhamdulilah ayie masih lagi boleh menaip entry and singgah blog kroang tak berapa sempat lagi disebabkan kerja-kerja di rumah plus ad sedikit kerja-kerja dikedai yang mesti diuruskan. incya-Allah lepas terawih nanti ayie singgah blog korang semua. mintak maaf yer. incya-Allah ayie akan terjah one by one.

entry kali ini cuma mahu tunjukkan satu tutorial berkitan dengan show/hide button for content macam dekat blog ayie itu. apa korang tidak perasan. mai sat tengok dekat bawah ini and korang tengok dekat mana ad button itu area blog ayie ini. hehe tutorial ini telah di request oleh kak diana.


sudah lihat. jom maisat ayie ajar macam mana mahu buat button tersebut supaya blog kroang semua nampak lebih kemas dan menarik gitu. 

  • logn in blogger ---> dashboard ---> design ---> page element

  • and then cari html/javascript.

  • kalau sudah jumpa korang masukkan code dekat bawah ini ke dalam html/javascrit tersebut.
<center><div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 120px; " value="TEKAN SINI" 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;TEKAN SINI&#39;; }" type="button" />
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
  • (korang nampakkan perkataan yang ayie boldkan warna MERAH itu, korang boleh tukar ayat tersebut ikut suka korang).

  • masukkan code yang korang na letak seperti shoutbox, ping blog @ backlinks.

  • lepas masukkan code yang korang mahu letakkan tadi. korang masukkan code dibawah ini pula sebgai penutup.
</div></div></div></div></center>

lepas sudah siap korang bolehlah save and then lihat hasilnya. jika ada pertayaan sila tanya kepada ayie di kotak komen ini yae. incya-Allah ini sahaja yang ayie dapat bantu. selamat mencuba.

credit to sumber

selamat berbuka + menunaikan ibadah puasa. 

30 comments:

sergeant keroro said...

owh, nice! nak try jugak la XD

Bro ahmad said...

coding yang nak sorok letak kt mana ayie?

Wanie said...

yeah, berminat..kang baru buat..thanks! :)

Aki said...

terbaik lah ayie! ;)

azrijohan said...

semart..blog smile pon guna function ni...

jemput join segmen ni ye:

http://ping.busuk.org/view/15828

Syuxer said...

nanti nak try...jimat sikit space dalam blog kan heheh

LeeyanaTheKim said...

oh oh! saya dah lame carik tuto ini.heheh. tenks! =)

Lieyly ︱ Alia said...

lapar pulak tgok gmbar atas tuh :D
heee !

diana said...

terima kasih ayie..
dah jadi..:)

muhamad hanif said...

shoutbox bole hide gaks eh ?



kahkahkahkah, kuno gila aku.

apik pehe said...

senang..takyah semak sangat..hehehe

syrupmasin said...

yeah makanan dan tutor :D

IMANSHAH said...

baru sempat jengah blog..pe khabar dik?

cik sakdi said...

mcm susah je ayie!! :( kehkeh

Taufiq Arifin a.k.a. Topimagine said...

wah.. menarik ar tutorial ni... akan nak wat gak la anti :) savie siket tempat :)

Freaky said...

wah nice tutorial ayie :D

Luqeem™ said...

oh nice. nak try gak nnti :D

misspurple said...

waa.. ;)

Bigdaddyz said...

ok! DONE!...cantik ...

ILA HonEyBuNNy said...

seronok jugak buat chatbox macam tu kan..

nak cuba la..kalau xjd..mmg xreti la...ehhehe

sha my heart said...

Nice tutorial.

Tapi, nak tanya langkah ke-2, nak cari HTML apa?

syAzAnA said...

boleh kurangkan berat blog aku. thanc wei.

izfanora said...

korang nie hebat giler main html..

tak daya dah nak godek html tue.. nk muntah dah..

alif haris said...

yeay ayie buat tuto :)
boleh alif buat rujukan hehe

yatie Awang said...

wah, cbox nusuk3 pulak, ramai dah akak tengok blogger pakai macam tu, jimat ruangkan

sha my heart said...

TQ ayie, dah faham.

btw, dah lama buat hidden shoutmix. tapi ayie ajar yg lain. lagi best.. igt nak cuba la.

TQ again

[sutera kasih] said...

nice tuto..menarik jgk kalo dtry :)

syrupmasin said...

woot..woot..ayie..dah jadi..haha..thanx weh :D

YOUsoF said...

Bagus la ko Ayie.. Terima kasih okeh! ;)

siti kektus said...

oohh. nice lah ;)

Blog Azrin Rahim

Mohd Azrin bin Mohammad Rahim
visit my page
 

Design by ZARIN ART 2014