Cara Membuat CHAT BOX di Kanan / Kiri Atas Blog

Taukah anda Cara Membuat CHAT BOX di Kanan / Kiri Atas Blog?

CHAT BOX merupakan suatu witget yang berfungsi untuk Chattingan layaknya seperti sosial media tetapi lebih mirip disebut SMS GRATIS .witget ini biasanya dipasang untuk komunikasi antara pengguna internet. Witget ini dapat mempercantik blog karna tampilanya menarik dan tidak terlalu KERAMENEN dan bagusnya lagi bila Chat Box ini di sorot mouse akan muncul dan tertutup secara otomatis.

Ok langsung aja ke TKP.

1. Masuk dulu di BLOGGER pastinya.

2. Klik Tata Letak --> Tambahkan Gedget --> HTML/JavaScript

3. Judul dikosongin saja --> Copykan kode dibawah ini di bagian kolom konten untuk kode warna merah ganti dengan kode CHAT BOX sobat.

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}* html #gb{position:relative;}

.gbtab{

height:150px;

width:50px;

float:left;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2cwL5544Wvd0S4ZlVWF-hquPeBmNvlf7fegMTEfHAVa5U3jKxO0xASb0n_sfWEVIMrPA9UFYQh_18adJeZaSqFZf3UoKU_SZheL9Hvy8Z2IProSVg8TMolyMGPayUnHGaDllf8NnkE9k/s1600/cooltext1548887256.gif') no-repeat;

}

.gbcontent {

float:left;

border:2px solid #0048FF;

-moz-border-radius-bottomleft:5px;

-webkit-border-radius-bottomleft:5px;

-o-border-radius-bottomleft:5px;

-khtml-border-radius-bottomleft:5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-topleft: 5px;

background: #000000; url() no-repeat bottom;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);

gb.opened = !gb.opened;

}function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}

}</script>

<div id="gb">

<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">

<center>

<!-- BEGIN CBOX - www.cbox.ws - v001 --> <div id="cboxdiv" style="text-align: center; line-height: 0"> <div><iframe frameborder="0" width="175" height="298" src="http://www6.cbox.ws/box/?boxid=811111&amp;boxtag=2bwkwl&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-811111" style="border:#0000FF 1px solid;" id="cboxmain6-811111"></iframe></div> <div><iframe frameborder="0" width="175" height="82" src="http://www6.cbox.ws/box/?boxid=811111&amp;boxtag=2bwkwl&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-811111" style="border:#0000FF 1px solid;border-top:0px" id="cboxform6-811111"></iframe></div> </div> <!-- END CBOX -->

<br />

<div style="text-align:center">

<span style="float:right; color:#FFFFFF;">Hubungi Admin di<a target="_blank" href="https://www.facebook.com/hasan.plurblues"> Hasan Plur </a></span>

</div>

</center></div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (50-gb.offsetWidth).toString() + "px";

</script>

</div>

Note : Untuk kode warna merah ganti dengan Kode CHAT BOX kalian. Jika sobat belum punya Kode CHAT BOX silahkan sobat daftar terlebih dahulu di CHAT BOX. 
4. Di menu CHAT BOX Klik Look & Feel --> Layout Option untuk mengatur tata letak CHAT BOX --> Style Presets untuk mengatur Tema CHAT BOX --> Edit CSS diabaikan saja.
5. Pilih Puplish untuk mendapatkan Kode CHAT BOX. Copy semua kode CHAT BOX sobat dan pastekan di kode merah tersebut.

    Contoh : Kode CHAT BOX yang berada didalam kotak merah.

6. Simpan dan lihat hasilnya.
Jika sobat kurang jelas Hub. Admin.

Terima kasih atas kunjungan anda di Artikel : Cara Membuat CHAT BOX di Kanan / Kiri Atas Blog, Cara membuat Chat Box, Kode untuk membuat Chat Box / Buku Tamu, Cara mudah membuat Chat Box di kanan atas BLOG.