Slide float Shoutbox with cute Frame and icon

Salam sume...

Kali neh..nk wat shuoutbox aka fibox yg ade slide comey cam cik permata punye...
Cantek kan???ni tutorial wa amek dari Wan Hazel.....

Dashboard>Add gadget>HTML

Copy kod kat bawah and paste kat DALAM kotak HTML eh....

<div style='display:scroll; position:fixed; top:10px; right:10px;'>

<a class='linkopacity' href='http://wanhazel.blogspot.com/2011/05/tutorial-slide-float-shoutbox-with-cute.html' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Get Slide Float Shoutbox'><img border="0" src="http://i1009.photobucket.com/albums/af215/wanhazel252909/iconlink.gif" /></a><br />

<a href="javascript:void(0);"onclick="showHideAT()"/><img class= width="140" height="140"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MxF_FNqqBiqqklecwZdPlySBMONPfX-OBMTu1pAnvYSkrSVg5ABGLMzWq-1fQXd6PPNr2kiKvvyLtjpjXi0tNCQS577h7WHNdFqgdNFSQqqNKR0BGsE-ue3iBo0DbARDwxFmp-2nF9x9/s1600/icon+shout.png" alt="Shoutbox" title="Shoutbox" /></a>

</div>

<style type="text/css">

#at{

position:fixed;

top:0;

;

}

* html #at{position:relative;}

.attab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url();

}

.atcontent{

float:right;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg65TSEGobpKPGVXyMNmYCoZEv_RqYSO0oaWb7DEElMcUR6dGuyM_83tpQgyEzxiqsd4rp2ZBMRtR-mygd8Yd654aX2NneZxNMB2r0jDGTzovRTIGikcRU9NDxCxMpdLebYDAFaRr0Ql2k/s1600/kak+yana+shout+frame+copy.png) no-repeat 0 0 transparent;

width:800px;

height:460px;center scroll ;

padding:56px 0 20px 5px;

}

</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;">

<br /><br /><br /><br /><br /><br />

Masukkan Shoutbox/Fibox/Cbox korang dengan lebar 270 dan tinggi 280

<center><div id="author"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" />

</a></div>

</center></div>

</div>

<script type="text/javascript">

var at = document.getElementById("at");

at.style.top = (-200-at.offsetWidth).toString() + "px";

</script></div></div>

Nak Ubah Frame untuk Slide Shoutbox korang kat sini eh..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg65TSEGobpKPGVXyMNmYCoZEv_RqYSO0oaWb7DEElMcUR6dGuyM_83tpQgyEzxiqsd4rp2ZBMRtR-mygd8Yd654aX2NneZxNMB2r0jDGTzovRTIGikcRU9NDxCxMpdLebYDAFaRr0Ql2k/s1600/kak+yana+shout+frame+copy.png

Nak ubah Icon Slide Shout korang nie lak..Korang ubah kod nie..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MxF_FNqqBiqqklecwZdPlySBMONPfX-OBMTu1pAnvYSkrSVg5ABGLMzWq-1fQXd6PPNr2kiKvvyLtjpjXi0tNCQS577h7WHNdFqgdNFSQqqNKR0BGsE-ue3iBo0DbARDwxFmp-2nF9x9/s1600/icon+shout.png

 Ok??Untuk Freebies Frame yang Len..Sila la Klik >>>>SINI

p/s: kalu sudi..sila la klik Button Donate eh..xpun Klil kat SINI jer...

---

♥♥Suke Entry neh?Komen Byk2 Dan Klik Button Donate Yer!!♥♥

---