Tutorial Chat Seperti Facebook

1. Log in blogger.
2. Masuk Design, Page Element, Add a Gadget, pilih HTML/Java Script dan masukan koding dibawah

<!-- Start fbs8z-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
//
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//transition effect
$(id).slideDown(100).fadeIn(50);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('.window').slideUp(100).fadeOut(50);
});
});
</script>

<style type="text/css">

.icon {
background-image: url(https://s-static.ak.fbcdn.net/rsrc.php/v1/yZ/r/E75W0JjLn8o.png);
background-repeat: no-repeat;
background-position: -136px -136px;
float: left;
height: 10px;
margin: 3px 4px 0 0;
width: 16px;
}

#fbs8zchat {

display: none;
position: fixed;
bottom: 0px;
right: 15px;
height:405px;
width: 234px;
background: #EDF3F7;
z-index:9999;
}

#tutup {

padding:2px 0 0 0;
}

#chatbox {

z-index:9000;
text-decoration:none;
color:#333;
line-height:15px;
position: fixed;
bottom: 0px;
right: 16px;
width: 180px;
padding: 4px 11px;
text-align: left;
cursor: pointer;
background-color: #EDF3F7;
border: 1px solid #CCCCCC;
border-bottom: 0;
font-family: 'lucida grande', Tahoma, sans-serif;
font-weight:bold;
font-size:11px;
}

div#chatbox:hover{

box-shadow: 0px 0px 5px #FFAA00;
background-color: #fffff2;
border: 1px solid #FFAA00;
border-bottom: 0;
}

#chatbar {

Padding: 4px 11px;
background-color: #327DC3;
font-weight:bold;
font-family: 'lucida grande', Tahoma, sans-serif;
color:#fff;
display:block;
line-height:14px;
text-decoration:none;
cursor: pointer;
font-size:11px;
}

#chatbarbod{

border: #00315e 1px solid;
border-bottom:0;
display:block;
}

div#chatbar:hover{
background-color: #327DC3;
}

#fbs8ztepi {
border: 1px solid #CCCCCC;
border-top:0;
border-bottom:0;
height:100%;
}

</style>

<!--Button-->

<a href="#fbs8zchat" name="modal">

<div id="chatbox">

<img class="icon img" src="https://s-static.ak.facebook.com/rsrc.php/v1/y4/r/-PAXP-deijE.gif" alt="" width="1" height="1" />Chat ( LETAK FREEONLINE USER SCRIPT DISINI. SCRIPT BOLEH DAPATKAN di www.freeonlineusers.com )

</div>

</a>

<!--end button-->

<!-- Start chatbox -->

<div id="fbchat" class="window">

<!-- Start close chatbox -->

<div id="chatbarbod">

<div id="chatbar" class="close" >Chat </div>

</div>

<!-- End close chatbox -->
<!-- Chatbox side border -->

<div id="fbs8ztepi">
<!-- mula -->

<!-- LETAK KODING CHATBOX KORANG DISINI, TINGGI DISYORKAN 370px LEBAR 98% -->

<!-- tamat coding chatbox -->
</div>
<!-- End chatbox side border -->
</div>
<!-- End fbs8z-->

3. Tukar perkataan yang di bold hitam seperti yang diberitahu dan tukar bold hitam bergaris mengikut kesesuaian tinggi dan lebar chatbox korang.
4. Save dengan senang hati :P

Contoh Chat seperti Facebook seperti yang terdapat di kanan bawah blog ini http://suffer.frenzyfm.my.