tutorial

ok fara akan ajar cara2 utk membuat box pesanan yg bleh anda lihat cth di sebelah kanan blog fara.. di box fara ada gambar rama2 dan pesanan...

cara2 utk membuat nya...
senang je...
1. anda pergi ke > design > Edit HTML...
2. click Expand Widget Templates..
3.anda tekan ctrl + f dan copy code sebelah ini  ]]></b:skin> dan search..
4. copy code yg berwarna merah di bwh ini dan paste kan di bwh ]]></b:skin> 


.author-box {
background:#808000 ;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box a{
color:#666;
}

.author-box img {
background:#804000 ;
float: left;
margin: 0 10px 0 0;
padding: 4px;

}

yg code warna pink tu anda bleh tukar code warna lain.. utk mendptkan code warna bleh  click here..
kemudian anda bleh save...


5. lepas tu anda pergi ke > design > page elements > add gadget >  (copy code bwh ini paste dekat HTML JavaScript)


<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:5px solid #800080;
background:#FF8040;
padding:10px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
<img src="http://img706.imageshack.us/img706/642/tutupb.png" title="Once Klick Tau!" alt="tutup" />
</a>
</div>
<center>


<div class='author-box'>
<img alt="avatar" class="avatar avatar-70 photo" height="70" src="[url=http://www.glitter-graphics.com][img]http://dl9.glitter-graphics.net/pub/660/660759jzef7rhw6w.gif[/img][/url]" width="70" /><b>AYAT ANDA</b><br />
PESANAN ANDA<br />
</div>
</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

*yg kod berwarna hijau tu anda bleh mendptkan avatars di click here
*yg warna ungu pula tukar mengikut AYAT atau PESANAN anda....
*utk warna biru cair pula anda just tukar code colour je code colour bleh dpt click here

---

LoVe sOmeOne :D

---

Kongsi