Cara Membuat Buku Tamu Melayang Di Blog

Buku tamu ato kalo gw bilang lebih tepatnya chat box banyak di pake di blog. Fungsinya tentu buat ngemudahin pengunjung chat sama pengunjung laennya ato sama yang punya blog. Juga bisa buat absen pengunjung setia blog loe gan. Kalo buku tamu di pasang di sidebar bakal ngabisin tempat gan, jadi bagusnya loe pasang buku tamu melayang di blog.

Buku tamu melayang yang keliatan cuma tabnya doank jadi kalo di klik baru muncul chat boxnya gan. Loe ada niat pasang buku tamu melayang di blog gan? Kalo ada gw bakal share cara membuat buku tamu melayang di blog buat loe gan.

Silahkan langsung disimak gan, gak pake edit HTML tinggal nambahin widget di blog aja gampang banget.

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXuX7HI2sqQsKLW0bjXlqApuMOciLyswoSZzcTeYuJ-CfiYNAh50cs56T493maJLJ7ROie1wdt1XbsmIs-gxNiIAJdIOx_z2K1Ud8oEpCpgThQDYXjDMyWvEjoKSmgBkXJZfTfCMNFJwoz/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://seociyus.blogspot.com/2013/01/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 ngedit gan. Pertama pastein kode chat box loe di tempat yang udah ditentuin gan. Terus buat top:100px; itu buat ngatur posisinya, semakin gede nialinya semakin kebawah chat boxnya gan.

• Lalu buat background:url itu buat ganti tabnya gan silahkan diganti mau pake warna apa. Ni gw sediain banyak pilihan biar loe puas soalnya kebanyakan tutorial di blog laen pake tab warna hijau bosen ya gak gan.

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTNX7QNLoumKMgDm4UxlNpyLG_XB73xH3zoRBrRC0wzxdV7sCtWZNspYWI04LWWVe98MGOEAaSrUfUWjVnvkNS4Wt1-tILACKOgG69SllwYjLAHXBY9EdNX_xfjHsCbedKaLPpxKYltGZf/s1600/chat+merah.png


2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU2xP2DPC8dfvO3sf_KHdkAlsYdgf1pqUviOIaqCwXHbkDkSZ7mToeJOT_EW2AtyZ2VU5IZxBUOXwLeIElyJVSb63By2usPQ6K3r6OCNXPN48YpZwEDml6mbVg_bR9dZpDiWcZiJ1cIU53/s1600/chat+kuning.png


3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2r0orlE6bnfaXncloqALVgRcitIBhJ4VULth4WM0725_Mg7ry1Ice9kP4DIza_YoKX3dAHAyoKA_I1MUss_VFu8OFmUznAMfuG6bLh-V7VpJ9R-Pfo7NVJLNESje78IMIel9MFfb471mb/s1600/chat+merah+muda.png


4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaGgkj8Ez8Kbyt8n3GhahmntMaW57usD-Cqavr_k1gnhJT5uMSTfSC0gDgKU9q7JNE5F6fv7TU44KJoRDHwTNy_yz5NBOwft8nYI0ElRAu4KuyKYcSd9znbaVsbNGB48s6Weor1wcgzD8p/s1600/chat+orange.png


5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXuX7HI2sqQsKLW0bjXlqApuMOciLyswoSZzcTeYuJ-CfiYNAh50cs56T493maJLJ7ROie1wdt1XbsmIs-gxNiIAJdIOx_z2K1Ud8oEpCpgThQDYXjDMyWvEjoKSmgBkXJZfTfCMNFJwoz/s1600/chat+pink.png


6. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpfb69lhgdldZ2ipnkoliC4jS5a9MUJ5pKI5IaCvl5S33Y9WPytZOsDdn48LnRpUzxsUVswcAfUaucRSziCPYgP8e7D69nlch5DOvvRTvmKck55k52M96UuDfcd1kVW7Dn5XgRTfkqu2AC/s1600/chat+ungu.png


7. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPAJkxHe3eV161nNQupaZZYVdJxSLLaBNoHWqJMWvnykmLhuhXcwsOMloVs7okoABWYE3HBf5mbobF_Nf-fvymDhmy60DGkB0TkP_Zz7f5dd9FPh1QV8kwzw9vJGmXBl6x4F4VeTXxSfte/s1600/chat+biru.png

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3kb1SlWYEtP4x8U5F5lN6ggvh6qY_GZeKMxcmS-IPFe5NkerFgClFJg0E3EQlWdCr6MO4-MCoAHskboyx27ePnuDTRecFrhnXaPm9K7p7y6pKS7GZVlCcjZS5m-k5WWfqQSIRcyR7gkPA/s1600/buku+tamu+orange.png


2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-HjLd22CeuuYQBGmMufI_AH8fyArdqVbI3g5GzGZXcxFac8cwEOhJy4zkW4tbiu0CjkS3SOEZViVxzsr49TZ9Z7Buetpn2u701oH5L_VXzN8daAY_fhM_97jxmS31Tw5L9x6zJSRlgyq0/s1600/buku+tamu+kuning.png


3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTx1N_N10SEQLRe1srYoqueX5W_IYa6vLOBadFlKDIIApgUXEeLIfXgsNfBSxvCDcANkfoc155VnXlvDDNpJFb5z33ZtDKUeBDgA5klexAQgcPJ66FeBttEBzFKcY-hXDMYFWY95Mut6h1/s1600/buku+tamu+merah+muda.png


4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiomqRAO12fknSAQyfPG57ZGo3tf2N8iymCfGZPdQtKT7A9EP9WGLSu0lmjS1EPzEP3N4GHpwrBkREdgl7pYElhfsz4mVx-xyFX_VEyGLkVBmWMrQg7lJgc9yh8FrHKPEi2p-M5fgm8hL6W/s1600/buku+tamu+merah.png


5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBLhRqs3Vlw9MkBJTXQeUFvclM0huOxcZyzZh60HalN6CIkGYUNF94lmQkJMq0XLtAf8sVHfziV-MFEChdEUgBUNy4L4n0R_-4-hEwBEX8NBLPqYE3TDzwa6r4goHxY306otzRnieSrBJH/s1600/buku+tamu+ungu.png


6. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk7eOj82Q3r4Q03S8JFqzE4acD6DkKPsoWP5xoGyUeKAvhVAHKi6-V598ikDbhTc3aoLTnNrGsvLgYi8Wjcn3T2xK755h-jNxyfVsTfEGO0A2tWwanSeLaHx25o1a3p1hUQVCtjmR6Yr3K/s1600/buku+tamu+pink.png


7.  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSy-_I3QhBL9_9ls16H-Wqr6RJuqzt0An_ibQezhHeDAD93iFReKxRHfKbw9E_RMz0ktN_gM1LAoyrQ-s833ROeHeKq6fWCie1QiSuywRpZZ4VnLjFsszrFA62eBeAEktvoFh7Vu1RNgqm/s1600/buku+tamu+biru.png

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


Sekian dulu yang bisa gw share semoga bermanfaat buat loe yang mau pasang buku tamu melayang di blog. Jangan lupa juga absen dengan ninggalin komentar dibawah gan.