chatbox

MEMBUAT CHATBOX PADA BLOG

Chatbox sangat banyak memberikan manfaat pada blog kita terutama selain dapat mempercantik tampilan blog, chatbox atau buku tamu ini dapat mendatangkan pengunjung kehalaman blog anda dan yang paling penting menurut Dapur Tutorial Blogspot yaitu sebagai saran untuk saling berkomunikasi dan silahturahmi antara pengunjung dengan admin blog.

Cara menambahkan chatbox / buku tamu kehalaman blog anda dan manfaatnya bagi blog anda.

Berikut lankah-langkah untuk membuat Buku tamu/chatbox pada halaman blog :

Langkah 1 : Mendapatkan kode buku tamu dari   ChatBox

Ikuti langkah-langkah di bawah ini
1. Kunjungi halaman resmi CBox disini www.cbox.ws
2. Klik Sign Up, seperti gambar ini

3. Setelah itu anda akan diminta untuk mengisi formulis pendaftaran seperti gambar ini

     


4. Isi data yang diminta seperti gambar ini kemudian klik Create My Cbox

      

5. Apabila data yang anda isi sudah benar akan ada pesan seperti berikut (lihat yang didalam kotak merah)

       

6. Kemudian buka Email yang anda gunakan untuk mendaftar Cbox Karena ada Email konfirmasi pendaftaran anda yang dikirim oleh Cbox

7. Klik Link konfirmasi tersebut untuk mengaktifkan akun Cbox anda

      

8. Setelah Email konfirmasi tersebut anda klik, anda akan mendapatkan pesan seperti berikut ini

       

Akun anda sekarang sudah aktif dan anda bisa masuk ke akun CBox anda

9. Sekarang Sign in Ke akun Cbox anda menggunakan Username dan Pasword yang sudah anda buat saat mendaftar tadi untuk mendapatkan Kode ChatBox atau bukutamu anda

10. Setelah anda masuk anda langsung dihadapkan ke halaman berikut

       

11. Copy kode buku tamu yang diberikan Sekarang anda sudah mendapatkan Kode buku tamu anda.

Langkah 2 : Memasang kode kehalaman Blog

Ikuti langkah-langkah di bawah ini

1. Login Ke Blogger

2. masuk ke bagian tata letak

3. Klik tambah gadget

4. pilih Html/Javascript

5. lalu copas kode di bawah ini

<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjct4qbNAxJLhrJ7i5tnyNfyghH-qrekjKTH_59kS4FyYhXh46b4q9zll47OHaRf7xc8aZZq1tDck5T4_SyL9ig_PmtDC3FFz-YhSaJFs-MDQTbhboEQyfMjVE5b_c3EB-OGyti6ExrrjE/s400/cbblue.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #008232;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<br />
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()">
</div>
<div class="hcrcontent">
<div id="cboxdiv" style="line-height: 0; text-align: center;">
<div>
<iframe allowtransparency="yes" frameborder="0" height="305" id="cboxmain5-709403" marginheight="2" marginwidth="2" name="cboxmain5-709403" scrolling="auto" src="http://www5.cbox.ws/box/?boxid=709403&amp;boxtag=7t4jh5&amp;sec=main" style="border: 0px solid;" width="200"></iframe></div>
<div>
<iframe allowtransparency="yes" frameborder="0" height="75" id="cboxform5-709403" marginheight="2" marginwidth="2" name="cboxform5-709403" scrolling="no" src="http://www5.cbox.ws/box/?boxid=709403&amp;boxtag=7t4jh5&amp;sec=form" style="border-top: 0px; border: 0px solid;" width="200"></iframe></div>
</div>
<br />
<div class="hc-credit">
<span style="float: left;">

<a href="http://www.monggomampir123.blogspot.com/" target="_blank">
BY Monggo Mampir
</a>
</span>
<span style="float: right;">
<a href="javascript:showHidehcr()">
TUTUP
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>

Selamat Mencoba