Tutorial - Slide Float Widget
Salam korang. Shafiq rase dh lama x buat tuto kan
Tibe2 mood nak buat tuto. Ok tuto kali ini shafiq nk ajr korang sume mcm mane nk buat Slide Float Widget atau kalau korang x tau ape bende binatang ni tgk gamba bawah ni
1) Ok first sekali korang pegi Design>Add gadget>HTML/javascript
2) Then copy code di bawah ni dan paste di bahagian HTML/javsscript
<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;
-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;">
LETAK APA2 JENIS CODE DI SINI
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWxsvWtRJz-Dnewcp4Hna8PGJGmaU5Jypg6HJZMjHwyd9C3Nunvx9Imtus6ynnUjHzuSb4zGsJiPtUonqUKmvwz5HzKdstFw_Rb3pfInJK0E-kJwepRGxeU4TFiYg4mYHkmU-r1ifD3LA/s1600/close_button.gif" alt="close" title="Close" /></a></div>
<br><
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></center>
#000000 itu adalah code warne background. Boleh tuka dgn code warna kesukaan anda. Klik sini utk cari code warne kesukaan anda.
Close itu pula juga boleh tuka dengan ayat korang suka
3) Then ikut balik step 1 dan copy code di bawah ini pula dan paste diruangan HTML/javascript
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;F
opacity: 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlWlA8fQ_eTBuroHD45FBlRQmSxNIWM8IzqjxPVxZNLPexT18Ys1Lu6EO7j6-wMn2_ZgAgbsWwPDrgHTlKYlXJZJeyyKeiIaz26hfCkJJU0dgePZK6tNBb82UMxbGCVRIEZ9C7TGk9ZFE/s1600/button+push.png" alt="PUSH" title="KLIK ME" /></a>
</div>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlWlA8fQ_eTBuroHD45FBlRQmSxNIWM8IzqjxPVxZNLPexT18Ys1Lu6EO7j6-wMn2_ZgAgbsWwPDrgHTlKYlXJZJeyyKeiIaz26hfCkJJU0dgePZK6tNBb82UMxbGCVRIEZ9C7TGk9ZFE/s1600/button+push.png itu korang boleh tuka dengan gambar icon kesukaan anda.
Klik me juga boleh tukar dengan ayat korang
Sudah selesai. Payah sikit buat tuto ni. Selalunye mmg x jadi
TRY AND ERROR
Kalau x jadi sila komen. Kalau jadi pon komen la jugk. hehehe
