:: Seri Najwa ::

Thursday, 1 March 2012

Tutorial : Button Show-Hide Spoiler yang comel

Apa khabar rakan2 blogger semua ? 
Harap2 semua nya sihat2 belaka .

Kali ni Najwa ada dapat request dari seorang
rakan blogger Najwa nih . Dia tanya macamana nak buat
button yang bila kita tekan ,
dia akan keluar something macam RULES , MYSELF
yang ada kat tepi sidebar Najwa ni ?

Oke , contoh nya macam ni .

Bila kita tekan yang ini :




Dia akan keluar begini :


Jadi macamana korang rasa , menarik kan ? Nak cuba tak ?
Kalau nak buat jom ikuti tutorial ini :)
First step :
Dashboard --> Design --> Add a Gadget --> HTML/Javascript

Second step :
Korang copy semua kod ni .
 
<center><div id="spoiler"><div><input value="Rules" style="width:88px ;font-size:12px;background-image: url(http://i305.photobucket.com/albums/nn230/_maggnesss_/Background/vintage-blue.jpg);-moz-border-radius: 10px; border-radius: 10px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide Spoiler!&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;none&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show Spoiler!&#39;; }" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">
<center><center>Terima kasih kerana singgah ke blog Najwa yang tak seberapa ni. Kalau dah singgah jemput lah baca entry2 Najwa ni. Kalau rajin follow sekali , tak paksa . One more , jangan buat sebarang 'Event' copycat yer kat sini sayang ... Kecuali untuk tutorial2 dan freebies2 sahaja .. Okay ,Happy Blogging ! :)</center></center></div></div></div></center>

Third step :
Paste kan di bahagian html/Javascript tuh.

Warna Merah : Nama untuk button .

Warna Biru : Url background untuk button korang .

Warna Hijau : Ayat2 ataupun kod korang .

#Korang nak url background untuk button ?
Ni Najwa ada sediakan ni . Pilih2 , jangan malu2 :)
http://i715.photobucket.com/albums/ww153/billyrobinson5790/Background.jpg
http://i958.photobucket.com/albums/ae67/farahnabilanawi/backgaadsa.jpg
 http://i1064.photobucket.com/albums/u377/oBrownSugaro/1211545229.jpg
Kalau korang suka background2 ni korang ambil lah . Kalau tak suka
korang leh cari sendiri kayh , kat photobucket.com :)
kat situ macam2 background ada .
Copy direct link je tau . ^_^

Then , kalau korang dah ubah semua nya , terus saja tekan Save :)

Sekarang , cuba check blog korang . ada tak ? ^_^
Kalau ada bagus lah . Maksud nya dah menjadi lah tuh . :D
Dah jadi jangan lupa inform kat Najwa tau . 

Selamat Mencuba !! 






Coretan hati , dari seorang gadis yang
bakal menghadapi SPM ..


Suka Entry saya? Kalau suka Like lah :)

0 Responses ♥: