Protected by Copyscape Unique Content Checker
KOS PENGHANTARAN ADALAH PERCUMA

----> KELEBIHAN BEDAK ARAB
----> SENARAI HARGA
jika anda berminat mahupun terdapat sebarang pertanyaan, sila ----> INBOX zati

Monday, November 22, 2010

chatbox versi facebook [tutorial]

salam readers, oke harinie I nak buat tutorial, disebabkan paper I dah habis, cuti sem pon bermula so I jadi rajin sikit nak buat tutorial untuk korang

ada beberapa orang tanye macam maner nak buat chatbox macam I?? chatbox versi facebook, nampak unik sikit kan, erkkk


PERINGATAN
sila buat salinan kod shoutbox korang sebagai langkah berjaga-jaga kalau korang takut tak menjadi
chatbox versi facebook nie boleh digunakan oleh semua pengguna seperti blogspot, wordpress, wordpress.com atau ape-ape sahaja asalkan html disokong

oke for first, korang pergi halaman facebook plugin di 'http://developers.facebook.com/plugins'

then keluar seperti gambarajah di atas, korang pilih "Live Stream" yang terletak di belah kanan bawah sekali


isi kotak tersebut dengan cara di bawah :
App ID: 'jangan ubah ape-ape' (jangan pulak korang tukar app ID tu ikut sejibi macam dalam gambar kat atas nie, dalam gambar tu app ID I) =.=

Width: 'saiz lebar chatbox yang korang nak'

XID: 'saiz ketinggian chatbox yang korang nak'

Via Attribution URL: 'biarkan kosong'

Always post to friends: 'pastikan korang tick pada kotak tersebut, kalau tak mesej tersebut akan dipaparkan ke wall fb u all' 

akhir sekali klik 'get code'



satu pop-up windows akan keluar, salin code di bahagian 'iframe' dan letakkan di notepad dahulu

bukak dashboard >> design >> add a gadget >> HTML/javascript, copy (Ctrl+C) code di bawah : 
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</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.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">   </div>
<div class="gbcontent">
Masukkan kod dari facebook di sini
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
gantikan "Masukkan kod dari facebook di sini" dengan code 'iframe' yang korang copy kat notepad tadi, SAVE

cube tengok jadi ke tak?? if ada error bagitau I, harap korang berjaya =)

p/s: credit to fakhri ^^

LIKE DAN SHARE ENTRY INI KALAU SUKA, TQ

10 kritikan membina:

teddyuna on November 22, 2010 at 8:40 AM said...

wah bguslah zaty ni..;)

zati on November 22, 2010 at 8:49 AM said...

@teddyuna
huhu nope laa dear, act agak takut gaks orang request2 tuto nie cuz zati takut tuto zati buat nanti tak jadi hiks :D

Syamil Hafiy on November 23, 2010 at 8:33 AM said...

wahh ! thx buat tutorial ni.
it helps (;

zati on November 23, 2010 at 8:38 AM said...

@Syamil Hafiy
welcome ^^

Cik kEChiks on November 23, 2010 at 9:53 AM said...

dah buat..cuba u tgk blog i. mcm tu ke rupa nya?

zati on November 23, 2010 at 10:15 AM said...

@Cik kEChiks
yup dear, mcm tu rupanye ^^

asphaq on November 23, 2010 at 1:21 PM said...

Macam best. Huhu.
Yap. Tetiba baik guna I. hahahahaa.

zati on November 23, 2010 at 1:43 PM said...

@asphaq
hahaha teruskan penggunaan I tu ^^

Ann on November 23, 2010 at 2:41 PM said...

love your tutorial :) thnx sygs..

zati on November 23, 2010 at 2:45 PM said...

@Ann
welcome sys =)

 

zati and lappy Copyright © 2010 Designed by Alieff. Wanna get one? CLICK HERE!