Cara Membuat Buku Tamu Melayang Di Blog

Cara Membuat Buku Tamu Melayang Di Blog

Buku tamu melayang yang keliatan cuma tabnya aja jadi kalo di klik baru muncul chat boxnya.
Apakah kamu ingin memasang buku tamu melayang di blog ? nah disini saya akan share cara membuat buku tamu melayang di blog.

Silahkan langsung di lihat di bawah, Tak perlu edit HTML tinggal nambahin widget di blog aja,Mudah & praktis..

Cara Membuat Buku Tamu Melayang Di Blog

• Yang pertama loe harus punya kode chat box gan, cara dapetinya gampang loe tinggal registrasi di situs yang nyediain chat box gratisan. Loe bisa daftar di chatWING ato CBOX gan. Kalo mau di situs laen juga boleh sesuai selera loe aja gan. Tapi gw rekomen di chatWING karena tampilannya keren, bisa login pake FB ato Twitter dan loadingnya super cepet gan.

• Kalo udah dapet kode chat boxnya, sekarang loe masuk Blogger terus pilih Layout dan klik Add a Gadget lalu tambahin HTML/Javascript. Lalu tinggal di copy kode di bawah ini gan dan pastein di kotak kosong HTML/Javascript tadi tapi jangan di save dulu gan.

<style type="text/css">
#scgb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #scgb{position:relative;}
.scgbtab{
height:100px;
width:10px;
float:left;
cursor:pointer;
background:url('http://4.bp.blogspot.com/-IdZufzDAeB0/UOsxJrOwyzI/AAAAAAAABV4/wUf78ao_Sfc/s1600/chat+pink.png') no-repeat;
}
.scgbcontent{
float:left;
border:2px solid #FF00CC;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var scgb = document.getElementById("scgb");
var w = scgb.offsetWidth;
scgb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
scgb.opened = !scgb.opened;
}
function moveGB(x0, xf){
var scgb = document.getElementById("scgb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
scgb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="scgb">
<div class="scgbtab" onclick="showHideGB()"> </div>
<div class="scgbcontent">

Paste Kode Chat Boxnya Disini Gan

<div style="text-align:right">
<a href="http://seputarblogin.blogspot.com/2013/08/cara-membuat-buku-tamu-melayang-di-blog.html" target="_blank">[get this widget]</a> <a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var scgb = document.getElementById("scgb");
scgb.style.right = (30-scgb.offsetWidth).toString() + "px";
</script>

• Sekarang tinggal di edit. Pertama paste kode chat box kamu di tempat yang udah ditentuin . Terus buat top:100px; itu buat ngatur posisinya, semakin banyak nilainya semakin kebawah chat boxnya.

• Lalu buat background:url itu buat ganti tabnya silahkan diganti mau pake warna apa. di sini saya sediakan banyak pilihan biar puas.

1. http://4.bp.blogspot.com/-NIPinE6ow_0/UOuwO9qz93I/AAAAAAAABXA/H3jzT5WLAHM/s1600/chat+merah.png 

2. http://4.bp.blogspot.com/-WqID5aUC3yc/UOuwN3D88lI/AAAAAAAABW0/nD17F9pylLQ/s1600/chat+kuning.png 

3. http://2.bp.blogspot.com/-6TgQRdoW0z4/UOuwN_E4DeI/AAAAAAAABW4/qP58OnvKMXU/s1600/chat+merah+muda.png 

4. http://3.bp.blogspot.com/-AZBNaNWzCJs/UOuwPKp_gtI/AAAAAAAABW8/PYXKforcwKg/s1600/chat+orange.png 

5. http://4.bp.blogspot.com/-IdZufzDAeB0/UOsxJrOwyzI/AAAAAAAABV4/wUf78ao_Sfc/s1600/chat+pink.png 

6. http://4.bp.blogspot.com/-MLddS0EHMiA/UOuwPZZFrcI/AAAAAAAABXM/tVZPW9jBiYk/s1600/chat+ungu.png 

7. http://4.bp.blogspot.com/-uf9WlRWHN_k/UOuwN3aLkFI/AAAAAAAABWw/yXwmndg4GV8/s1600/chat+biru.png

1. http://4.bp.blogspot.com/-8gN9mYWBNmc/UOuyweC6Z2I/AAAAAAAABYI/TygRZ3SafbY/s1600/buku+tamu+orange.png 

2. http://1.bp.blogspot.com/-2pPjCWg1wJY/UOuyvT7XrBI/AAAAAAAABX8/lbPHt2JK5fA/s1600/buku+tamu+kuning.png 

3. http://2.bp.blogspot.com/-AehfZePXAE8/UOuyvelZw-I/AAAAAAAABYA/b6TFxcLuS8A/s1600/buku+tamu+merah+muda.png 

4. http://1.bp.blogspot.com/-lk2Pns5rHTw/UOuywIvEotI/AAAAAAAABYE/shf75sfGdmo/s1600/buku+tamu+merah.png 

5. http://1.bp.blogspot.com/-CzYp5uQeGkk/UOuywx1lAHI/AAAAAAAABYc/o-rVl_bM9Sw/s1600/buku+tamu+ungu.png 

6. http://3.bp.blogspot.com/-lFHx2PahMA0/UOuywSoVxWI/AAAAAAAABYM/cYQ5S3qwRhk/s1600/buku+tamu+pink.png 

7.  http://4.bp.blogspot.com/-r-q3VzDNJLk/UOuyvdAsAKI/AAAAAAAABX4/DgLuMLTfSKs/s1600/buku+tamu+biru.png

Kalau sudah diganti tabnya tinggal di Save aja , beres sekarang blog kamu sudah ada buku tamu melayang atau chat boxnya . Buat border sama background content kamu tinggal ganti aja warnanya biar sesuai sama warna tab dan chat boxnya, buat kode warnanya kamu cari di kode warna HTML .


Semoga bermanfaat
bila tidak berfungsi silahkan hubungi saya.