Show & Hide Button Stylish

Itu yang aku maksud dan Sasya request like that
Hai temen-temen! Kali ini aku mau posting tutorial yang udah aku lingkarin. Tadi siang baru aja nambahin itu widget, eh, Sasya langsung kepo gimana caranya XD Kalian mau bikin kayak gitu? Itu sebenarnya show & hide button yang biasa. Tapi, itu aku sendiri yang edit. Yang mau tahu caranya, yuk ikutin langkah-langkahnya!
Langsung aja, yaa!

  • Dashboard > Tata Letak > Add A Gadget > HTML Javascript
  • Copy kode ini
<center><div id="spoiler"><div><input value="Your Title" style="width:150px ;font-size:12px; font-family: short stack; background-image: url(Your BG);-moz-border-radius: 7px; border-radius: 7px;margin:13px;padding:0px;border-style: 2px solid #A8E4FF;" 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; text-align: left; background-color:transparent; font-family: short stack; font-size:11px;background-repeat:repeat; border-radius:10px; border: 1px dashed #A8E4FF; background:url(YOUR BG); margin: 0px; border-width:2px;padding:3px; width:250px">
Replace Anything Here!</div></div></div><br />
</center>
  • Lalu, pastekan kode ini di kolom HTML Javascript yaa!
  • Save!
Kalo kalian mau kayak aku, jadi rules cbox, taruh aja di atas kode cboxnya! ^^
Selamat mencoba!

Kalo mau repost, tolong kasih credit namaku + link blogku, yaa! Ini aku sendiri yang edit!

Comments

  1. Makasih loh kakkk ... hehehe ..maaf kepo lohhh dan maaf ngerepotin. x_x

    ReplyDelete

Post a Comment

Before leave a comment, please ensure your comment is supportive and spread positivity :)

Popular posts from this blog

Movie About Insecurity : Imperfect

Ramadhan Tiba!