Slide float Shoutbox with cute Frame and icon

Salam Korang...

Kali nie Nurul nak wat Tutorial Slide float Shoutbox with cute Frame and icon..Dalam bahasa melayu nya..Tutorial Slide float shoutbox dengan bingkai comel dan icon...ahhaha..Memandai lak Nurul.


Kod nie Nurul koding sendiri k..Hope korang tak ubah lah koding asal nie..Bukan senang nak susun and baca bahasa HTML nie...Lepas tu ada lak yang mengaku dia yang wat kan..Macam Shout Ajax Float yang sebelum nie..Banyak lak yang mengaku dia yang buat..tapi tak pe lah...Segala yang baik tu untuk dikongsi..Law nak Copy Tutorial nie Copy je lah ...nak credit kat Nurul or tak nak tu terpulang..Bergantung ngan niat hati orang tu ..K lah merepek lak Nurul..Law korang nak..


Jum Tutorial..
Nurul akan mudahkan Tutorial untuk korang faham..


Dashboard>Add gadget>HTML
gadget paling Bawah ..

Law dah..Copy and paste kod nie dalam Gadget HTML korang tu..

<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/AVvXsEjN1flmgrYIyne8s29IjBcaqij_PWvRV93hFLQfe584R1moC3V4zJqxO2R2f8ijxNmOA1VkmNDkQuPvKOpAX34SmFjxFNSaw7hKqCKRlA4JsvToDM-u55QsmnMKSWOtErPa-brTpt2BY8Qg/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/AVvXsEhjxSV1xWBvxI8u8IJmBI4GNIIoYoA2RVBzE8bgaJR6t8WI5872m_KwOn6EUQNe7d9F6GOFpt5uaHzhlZCE0V1WRxbUb369-DevnbuQ51AHJ3-wB7LMhhCufQSMGapWDL3HzwQ3Uy9M6ic/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 korang denagn 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>

Lepas korang copy kod tu..Korang masukkan kod Shoutbox korang k..Dekat bahgian yang Wan ada tulis tu

Masukkan Shoutbox korang denagn lebar 270 dan tinggi 280

.

Dan law korang nak Ubah Frame untuk Slide Shoutbox korang nie..Korang ubah kod yang nie..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjxSV1xWBvxI8u8IJmBI4GNIIoYoA2RVBzE8bgaJR6t8WI5872m_KwOn6EUQNe7d9F6GOFpt5uaHzhlZCE0V1WRxbUb369-DevnbuQ51AHJ3-wB7LMhhCufQSMGapWDL3HzwQ3Uy9M6ic/s1600/kak+yana+shout+frame+copy.png

.

Dan law korang nak ubah Icon Slide Shout korang nie lak..Korang ubah kod nie..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1flmgrYIyne8s29IjBcaqij_PWvRV93hFLQfe584R1moC3V4zJqxO2R2f8ijxNmOA1VkmNDkQuPvKOpAX34SmFjxFNSaw7hKqCKRlA4JsvToDM-u55QsmnMKSWOtErPa-brTpt2BY8Qg/s1600/icon+shout.png

.

Dan selesai..Senang kan..Kat Bawah nie Nurul bagi percuma Frame Shout..So korang leh guna lah..Frame yang kat dalam Kod kat atas tu frame dia sebijik macam gambar kat atas skali tu..Yang kat bawah nie untuk korang tukar tukar Frame..ehehhe.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieK2KHf2hA5b9Sd0uVSLhGGUr29_vmqMtxuWyyhzrCJxXIPcH8a_AzSegK5H4cZt_gevBQd40eeDM94H-I-blO5H2KpHU6Y6aYGfZKSniN6UgPXCQMT_6tu_VOdljvatcxAZ46MKIprBf2/s1600/wan+shout+frame.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAIr1O5rNe2IAFPiokJsaRymA8ZjcBFyVOOFrk509RCcUgwGd-Nqd4GyhWI2zLt7DLN5E-e8TuuaIIV1JoF8ghadPNwtA_MJsb1PxH6P64K73ywERbQdYfdjN9PyluHV3xyYA9Nf-bWVMo/s1600/wan+shout+frame1.png

Ok tu je..

So Perbezaan Slide and Ajax Shoutbox cuma cara dia keluar je kan..hehehe..


K lah korang..


Selamat mencuba..


Sakit mata lak wat kodding nie..

---

A true muslimah : never forget that Islam, which encourages her to look attractive under the permitted limits, is also the religion that's warns her against extravagance ^_^

---