Tutorial : Button Show-Hide Spoiler yang comel

Apa khabar rakan2 blogger semua ? Harap2 semua nya sihat2 belaka .
Kali ni Najwa ada dapat request dari seorangrakan blogger Najwa nih . Dia tanya macamana nak buatbutton yang bila kita tekan ,dia akan keluar something macam RULES , MYSELFyang 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 :)

---