cara pasang butang show and hide

eyeMungkin anda ingin menyembunyikan widget atau kod /teks pada blog.Fungsi ini macam read  more yang ada pada posting,hanya menunjukan separuh sahaja teks pada posting dan bila diklik pada read more akan menunjukkan sebahagian lagi teks.Kod ini akan memaparkan butang yang mana bila diklik boleh memaparkan bahagian yang tersembunyi
klik butang dibawah untuk melihat contohnya



Gantikan teks letakkan kandungan yang hendak disembunyikan disini dengan kandungan yang dingini:
<div id="spoiler" style="display:none">
letakkan kandungan yang hendak disembunyikan disini
</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>
Teks show/hide pada butang boleh ditukar mengikut kesukaan anda.Boleh diletakkan pada sidebar atau posting.

Catat Ulasan

22 Comments:

Anggasona berkata...
Teknik Buat Blog

keren sob, hehehe :) saya jg sudah coba yg ini, bs menghemat tempat u blog..

kakrose@kakyon berkata...
Teknik Buat Blog

tkasih..share ilmu IT kat sini..

zalizalu berkata...
Teknik Buat Blog

huhu... thanks yahaya... :P

wanes berkata...
Teknik Buat Blog

wah! bagus tutorial ni..tq bebanyak

yahaya berkata...
Teknik Buat Blog

kakyon..Zalizalu..wanes..terima kasih..dtg lagi yer

Sharifah Nurul Shahirah berkata...
Teknik Buat Blog

thnx 4 the info

ejum berkata...
Teknik Buat Blog

menarik sungguh tutorial ni..thanks sudi berkongsi

Puguh Prasetyo berkata...
Teknik Buat Blog

Salam kenal sob....

AngahSayang2314 berkata...
Teknik Buat Blog

wah angah dapat info la... thanks..

i follow uuu jom kita tukar2 link

hamzah ian berkata...
Teknik Buat Blog

bagussss..

geekz36 berkata...
Teknik Buat Blog

kalau show/hide picture blh x?

yahaya berkata...
Teknik Buat Blog

@geekz36boleh juga untuk gambar

geekz36 berkata...
Teknik Buat Blog

macam mana nak buat button 'buka tutup' jadi center ye? button 'buka tutup' dia atas 'align left' kan.

yahaya berkata...
Teknik Buat Blog

@geekz36
tambah center

<div id="spoiler" style="display:none">
letakkan kandungan yang hendak disembunyikan disini
</div>
<center><button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button></center>

geekz36 berkata...
Teknik Buat Blog

really thankful for the info. puas cuba dr pg td.

Tanpa Nama berkata...
Teknik Buat Blog

saya letak 2 button pada satu page, tapi button dibawah x berfungsi, klau klik pada button bawah, ia akan terbuka kandungan button atas.

macam mana nak letak 2 button pada satu page?

Cik Miera berkata...
Teknik Buat Blog

knp xjd..huhu teks jd hilang

Tanpa Nama berkata...
Teknik Buat Blog

hi..ada x button hide n show yg selain tu? lebih menarik punya..mcm nk tukar background button tu? tq

eB ezrin berkata...
Teknik Buat Blog

kalo nk wat hide shoutbox camner laks?

yahaya berkata...
Teknik Buat Blog

@eB ezrin
cuba tutorial ni...Pasang shoutbox tersembunyi

zareliqa afiqa berkata...
Teknik Buat Blog

Saya dah buat tuto ni untuk facebook.Jadi..tp kenapa bila sy buat untuk banner tak jadi? dia keluar yang fb punya.huhu=.=

nuyui a.k.a miss YUI berkata...
Teknik Buat Blog

berjaya buat.. tp camne ea yang ayat tu,lau tekan dia tulis buka..tp lau tutp,dia tulis tutp ea?