Assalamualaikum dan selamat sejahtera kepada semua pengunjung-pengunjung BLOG-AYIE.COM saya ini diucapkan. Hari ini, artikel saya adalah sebuah berbentuk tutorial untuk para pengunjung saya yang mempunyai sebuah laman web seperti blogger.com ataupun wordpress.org.

Berdasarkan gambar di atas ini, inilah “Chatbox seperti Facebook” yang saya katakan untuk tajuk artikel saya pada kali ini. Walauapa-apapun, tutorial ini sebenarnya adalah khas untuk pengguna-pengguna BLOGGER.COM. Tetapi jikalau ada pengguna-pengguna WORDPRESS.ORG yang ingin menggunakan tutorial ini juga, pada pendapat saya, ia juga mudah untuk anda.

Langkah #1 : Dashboard > Design > Edit HTML > Expand Widget Template.

Langkah #2 : Sila salin kod yang ada dibawah ini untuk diletakkan sebelum code </head>.

<script src=’http://dl.getdropbox.com/u/708209/scriptabufarhan/fbtemplatev1/script.js’ type=’text/javascript’/>
<script src=’http://dl.getdropbox.com/u/708209/scriptabufarhan/fbtemplatev1/jquery.js’ type=’text/javascript’/>
<script src=’http://dl.getdropbox.com/u/708209/scriptabufarhan/fbtemplatev1/facebox.js’ type=’text/javascript’/>
<script type=’text/javascript’>
jQuery(document).ready(function($) {
$(&#39;a[rel*=facebox]&#39;).facebox()
})
</script>

Langkah #3 : Masukkan code dibawah ini sebelum ]]></b:skin>.

/*dock*/

#dockbottoms{position:fixed;bottom:0px;right:0px;clear:both;width:0px;padding:0px 0 0;border:1px solid #ffffff;border-bottom:0;background-color:#fff;z-index:11000}
#dockbottoms-inner{float:left;width:100%;height:35px;padding:0;position:relative;background-color:
#ccc;overflow:visible}
#dockbottoms-inner .block{padding-bottom:0;margin-bottom:0;padding-top:5px}
#dockbottoms-inner
#dockbottom-first{margin-left:15px}
#dockbottoms-inner
#dockbottom-middle{}
#dockbottoms-inner
#dockbottom-last{}
#dockbottoms-inner.dockbottoms-1
.column{float:left;width:100%}
#dockbottoms-inner.dockbottoms-2
.column{display:block;float:left;margin:0 10px;width:47%}
#dockbottoms-inner.dockbottoms-3 .column{display:block;float:left;margin:0 14px;width:30%}
#chat-wrapper{width:240px;position:absolute;bottom:10px;right:30px;z-index:11002;text-align:center;border:0px solid #ffffff}
#chat{height:405px;background-color:#ffffff;text-align:left;display:none;}
.slider{position:relative;z-index:11003;height:18px;padding:0;background-color:#ffffff;margin-top:-5px}
.toggleup,
.toggledown{text-align:center;display:block;line-height:22px;background-color:#ffffff}
#dockbottoms li.collapsed,
#dockbottoms li.leaf{list-style-image:none;list-style-type:none;margin:0;padding:0.2em 0.5em 0 0}
#dockbottoms ul.menu{list-style-position:inside}
#page,
#closure-blocks{margin-left:auto;margin-right:auto;width:960px;text-align:left}
#dockbottoms a {padding:0px 5px 5px 5px;}

Langkah #4 : Masukkan code dibawah ini dibahagian footer ataupun selepas code </body>.

<div id=’dockbottoms’>
<div class=’dockbottoms-2 clearfix’ id=’dockbottoms-inner’>
<div class=’column’ id=’dockbottom-middle’>
<div class=’block block-system region-odd odd region-count-1 count-9? id=’block-system-0?>
<div class=’block-inner’>
<div class=’content’>

</div>
</div>
</div> <!– /block-inner, /block –>
</div>
<div class=’column’ id=’dockbottom-last’>
<div class=’block block-block region-odd even region-count-1 count-10? id=’block-block-1?>
<div class=’block-inner’>
<div class=’content’>
<div id=’chat-wrapper’>
<div id=’chat’ style=’display: none;’>
<!–tukar_chatbox_anda_sendiri–>

<!– Begin ShoutMix – http://www.shoutmix.com –>
<iframe frameborder=’0? height=’400? scrolling=’auto’ src=’http://www1.shoutmix.com/?zabidi-ali’ title=’zabidi-ali’ width=’270?>
<a href=’http://www1.shoutmix.com/?zabidi-ali’>View shoutbox</a>
</iframe>
<br/><a href=’http://www.shoutmix.com’ title=’Get your own free shoutbox chat widget at ShoutMix!’>ShoutMix chat widget</a><br/>
<!– End ShoutMix –>

<!–tukar_chatbox_anda_sendiri_tamat–>
</div>
<div class=’slider’>

<a class=’toggleup’ href=’#’><img border=’0? src=’http://2.bp.blogspot.com/_S7IXT0y_EGM/TOuS990D-QI/AAAAAAAAALs/7XeYgj5ZSn4/s1600/chat.png’ style=’width: 260px; height: 30px;’/></a>
</div>
</div>
</div>
</div>
</div> <!– /block-inner, /block –>
</div>
</div>
</div>

Langkah #5 : Sila tukarkan code yang saya warnakan dengan warna merah di atas ini dengan code anda tersendiri ya.

Sumber & Demo :

Panduan Membuat Chatbox Seperti Facebook – Demo.