Cara Membuat Buku Tamu Melayang Di Blog

Shewaru Blog Buku tamu atau sering disebut dengan chat box banyak di pake di blog. Fungsinya tentu buat ngemudahin pengunjung chat sama pengunjung laennya atau sama yang punya blog. Juga bisa buat absen pengunjung setia blog kamu gan. Kalo buku tamu di pasang di sidebar bakal ngabisin tempat gan, jadi bagusnya kamu pasang buku tamu melayang di blog.

Buku tamu melayang yang keliatan cuma tabnya doank jadi kalo di klik baru muncul chat boxnya gan. Kamu ada niat pasang buku tamu melayang di blog gan? Kalo ada saya bakal share cara membuat buku tamu melayang di blog buat kamu 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 kamu harus punya kode chat box gan, cara dapetinya gampang kamu tinggal registrasi di situs yang nyediain chat box gratisan. Kamu bisa daftar di chatWING atau CBOX gan. Kalo mau di situs laen juga boleh sesuai selera kamu aja gan. Tapi saya rekomen di chatWING karena tampilannya keren, bisa login pake FB atauTwitter dan loadingnya super cepet gan.

• Kalo udah dapet kode chat boxnya, sekarang kamu 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/AVvXsEjx5QIgxLahuRkh6eB_buGUKArfqZthsvcArIFdlfzwkZ0j2udXc_SAIHKDsctsYjGQw_03H27Be1N3pKeaT8q-zC7N5U8px1jZ21MtmB1lCGBmbRiuHbArO0XvjvJSEw0BBuxnuDe2DgwL/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="https://www.shewarublog.ga/" 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 kamu 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 saya sediain banyak pilihan biar kamu puas soalnya kebanyakan tutorial di blog laen pake tab warna hijau bosen ya gak gan.

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqqU6QUPjvcMLfgYrGtF1RBZoVy-LGi3yHJXD9JD61djyb_KkgpQXD0iX-LM586GQmh6HZ1k62qy7fXztsKqRA3ohUjOy6apiEk0iygNgaLKYi0G5KgQ4b002EUkALJRlSmmsmTYDmkX4/s1600/chat+merah.png


2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGeFeFtjM765ynG2IrDCvO3lN-2OrL9hVLsXCW5tP16Nm_RQ61xkziWzlCtNnIZVfbvAqYz-X0Xf6sVI76akRGBbmYHwBTbt9T6zovgUTSzfAvRMd5zGAT4CyLwlj2rksS5MsbmSmFoCtb/s1600/chat+kuning.png


3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9wWygbdFa9vr-PKjNsC8Jq0BbxVFicDOGulUGSxRmJ9nwTLEs6-QPtjYMtfSSLWbW3t_hzX_VEJcSgtwle5Nv-deKgbcjbqFS1R0eSWlxkyEbdDzkVYHbDh6MHgjEL_agjJzyoxmkp10V/s1600/chat+merah+muda.png


4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp-v3pcgcWf5XXniCit019t1Tps2dqsLIdkKhFymX_u8sNgTInmjbrkgnJeh6-gZ2LXzF_D-gTGJzYfD3zQW9Fm_7LnOfrPFLwzjz1o1yz9LHVLFhlo4P2voJ-7x9TSn-HyfnHhZP4sPNB/s1600/chat+orange.png


5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5QIgxLahuRkh6eB_buGUKArfqZthsvcArIFdlfzwkZ0j2udXc_SAIHKDsctsYjGQw_03H27Be1N3pKeaT8q-zC7N5U8px1jZ21MtmB1lCGBmbRiuHbArO0XvjvJSEw0BBuxnuDe2DgwL/s1600/chat+pink.png


6. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7vZFHTIe9Wj9W-LJL0BHEd86e3rVHllVPFXqbcWBOmBKSmWJ3-IBjj1QyC11fDF21zp6-sUz8KJKW-R5NaeHLV9kW6Ak4581n-V_cHfLcg6SREtWOvSHLySnM0fETWh9RU4-3VGINreFI/s1600/chat+ungu.png


7. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQsmRyNlIpVAWtDUMJNVJYCM2_bWNGGK0RW-fq8AC6C8Z-aMnb__Tiwryvih9gkfkAG_wBqWhV0ITkc-aJGLt9DltEfHtUy8o6N2oLAAD9j5xt0zXF3l2DHOqOwvbAZn0JQguOshPWQc4/s1600/chat+biru.png

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7MVPKfkoToEOZZfuhfOdSQ5ZMyqHZl0rI2FRCsEltV9bcLGMhS-NPyIKs6uo4pbqjZtof9JuQkd9Z2CARNv69-1SVmePwBrdLLABrbuiAyzkqef1J1mVcPQ_pZqlhAn3SDk1y0XehmSaX/s1600/buku+tamu+orange.png


2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjin2_jeM48CR-2-gVlbXyA7TgleXYS6eSTNnfleKITpDuR3rbTSPyHqiclJnTJi85GpPWL34EjUvnVfsDWV5UiZ_avnv3BR8QSjcl9QOnXiIR-VIkWwuc06Po_5sGBfR-nLFPzBEWtGD87/s1600/buku+tamu+kuning.png


3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGwITxvrpIcQvCP7F5ozJlpcMpXf4Z21KMyy6KZ_F500dykxfx-IqUB_FjUXkKZl0vB2ZgYR-toPA0rBbWFJoPK5HnuzyMASTxNzOaBioO5XsZN3tGbFh1Q6rcDYRg9uqLZ0pGJUkwXFuk/s1600/buku+tamu+merah+muda.png


4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiIpb-4smv-aAGpyZUasWaO3YDhtjwMMtmqmj3adFXOuTUFhXC__hjVlROGb9SiLuS6831iSeKAQW3p5s-wY8sqkSUL3aAg3OE6ZsKIzaoHX6nQUFvihIayx57ZHSDjqjWkqKcLA0HC_cr/s1600/buku+tamu+merah.png


5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQzVSSfGwANGXVgdtMOXZ3ZVnBt-XSA_hEKzYYmhUan5tLxg-TYgCOMk2kKwlajHbEWT5WjU6lc0rq80f_sSOHlrHyjPc-x1V5uD81nojGTKVUCrCHyqLeEpyAufFIYCHdtFIuY9b8op7/s1600/buku+tamu+ungu.png


6. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz42H4R3a8JMHB05o2pgfjNTkpZBjTZbrKcUlpQDkX4Yn0rnDjYu0Tz9P5EbEp5qa9j5ZaJEjcNsPz41uIakLi2brIEGVn5q1-F9iRy6A_BSey-he8uEElSxn817mtQNqMcUJhBkVL45_q/s1600/buku+tamu+pink.png


7.  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiascCiP3a1SVLS2gvNwmXMo-6PUaqC7mlr2RarYIyNYKtIH1vxg-cUX32bA4ut4B2jNjgtC7AZ6Yl4WmFNBueTGG8994gRPau9pllkngJ206i7w6yC8_PEhmZxZPmg1g7igjB80GqwVjdY/s1600/buku+tamu+biru.png

Kalo udah diganti tabnya tinggal di Save aja gan, beres sekarang blog kamu udah ada buku tamu melayang atau chat boxnya gan. 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 gan.

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