Tuto: Slide widget

Hello chingu...
Okay harini cikgu balqis nak ajar macam mana nak buat slide widget..
Kat slide widget korang boleh masukkan apa-apa je...
twitter,facebook,follower,shoutbox N banyak lagi lah..
Menarikkan?... Okay jom start,..Tuto harinie memang menarik...


Dashboard > design > add a gadget > html/javascript

<style type="text/css">#at{position:fixed;right:450px;z-index:+1000;}* html #at{position:relative;}.attab{height:100px;width:30px;float:left;cursor:pointer;background:url();}.atcontent{float:left;border:2px solid #ff0000;background:url() #000000 repeat-x bottom center scroll ;-moz-border-radius-topleft:15px;-moz-border-radius-topright:15px;-moz-border-radius-bottomleft:15px;-moz-border-radius-bottomright:15px;padding:10px;}</style><script type="text/javascript">function showHideAT(){var at = document.getElementById("at");var w = at.offsetWidth;at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);at.opened = !at.opened;}function moveAT(x0, xf){var at = document.getElementById("at");var dx = Math.abs(x0-xf) > 25 ? 35 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;at.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}}</script><div id="at"><div class="attab" onclick="showHideAT()"> </div><div class="atcontent"><div align="center"><div style="background:url() no-repeat;">
MASUKKAN URL FACEBOOK, TWITTER, FOLLOW, CBOX, WEBSITE KAMU DISINI!</div></div><br /><div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_hbR7bfdm7FqiyUVNJdPy6rKBD-M9wTPBgFv4vUZzOzUbTyahVd-qEO7-JNU6W7IeBJOr52eOC2-7fWS6wxuK9OphabCZ_ysyHxYdDMqWFmv6rDlc9j1TDZaLhMUwxiBbXDsNhALMtbw/s1600/close_button.gif" alt="close" title="Close" /></a></div><br /><div align="right"><font size="3"><a href="http://letthaprincess.blogspot.com/"><div style="color: #FF0000;"><span ></span></div></a></font></div></div></div>

 <script type="text/javascript">var at = document.getElementById("at");at.style.top = (-200-at.offsetWidth).toString() + "px";</script>

Save!

Heppp!! Belum siap lagi.. :p

Next:

Add a gadget > html/javascript

<style type='text/css'>a.linkopacity img {filter:alpha(opacity=50);-moz-opacity: 0.5;Fopacity: 0.5;-khtml-opacity: 0.5;}a.linkopacity:hover img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;-khtml-opacity: 1.0; }</style><div style='display:scroll; position:fixed; top:220px; right:-0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="180" height="180"src="MASUKKAN URL GAMBAR KAMU" alt="PUSH" title="ndot"/></a></div>

Note:
Pink: Gantikan dengan URL widget korang yee
Biru:Url gambar


Save!

---

Suka?..Comment la okay.. :)

---