Lazada Malaysia

Monday, February 11, 2013

Home » » Tutorial : Button Show-Hide Spoiler

Tutorial : Button Show-Hide Spoiler


Cantikkan button show-hide spoiler di atas ni.
Jika korang pun nak buat button ni, ikutilah tutorial di bawah.


1. Log in blog > Dashboard > Layout > Add a Gadget > HTML/JavaScript.

2. Copy kod di bawah.

<center><div id="spoiler"><div><input value="Alexa" style="width:88px ;font-size:12px;background-image: url(http://2.bp.blogspot.com/-PG8wKmTPAMA/Tadavlw-zBI/AAAAAAAAAiw/v9-WPrl3aiU/s1600/swatch-mr016_15_hotpink.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>CODE WIDGET ANDA </center></div></div></div></center>

Petunjuk :

Alexa : gantikan dengan tajuk button yang korang inginkan.
CODE WIDGET ANDA : digantikan dengan kod widget yang ingin dimasukkan.

3. Paste ke dalam HTML/JavaScript.

4. Save!

* Antara kelebihan button ni ialah : Boleh masukkan banyak widget ke dalam button ni dan ia juga boleh mengemaskan bahagian sidebar blog korang. Cubalah! :)

6 sweet comments:

Chic Na said...

yang ni malas nak godek2. byk sgt coding2 nya.

dya bunga said...

dh lama dya cri tutor ni

Deqla manjew said...

nice tuto... boleh jimatkan ruang...

Cik Nur said...

err..sama macam cikna...hihihi

Mrs Velentine said...

coding ..hehe..MV mau letak kod nuffnang pun mau seksa sudah..haha

Wanieys a.k.a IbuQalief said...

rajin solehah buat tuto yer