Home » , » Cara Buat Chatbox Keren Untuk Blog

Cara Buat Chatbox Keren Untuk Blog


Hallo sobat ajibberrss semua :) 

Kali ini kita akan membahas bagaimana "CARA MENAMBAHKAN ATAU MEMBUAT CHATBOX KEREN DI BLOG ATAU WEBSITE SOBAT".
Chat box merupakan sebuah fasilitas yg sangat bagus yg sangat berguna untuk mendekatkan para blogers dengan para pembaca, dan selain itu dengan chat box kita juga bisa saling bertukar fikiran dengan para blogers yg lain, seperti membicarakan semua hal yg berkaitan dengan dunia blogging dan berbagi tips sesama bloger.

Kita sudah banyak menjumpai chatbox2 yg sudah banyak beredar mulai dari yg berbentuk bulat, kotak, ada yang melayang dan masih banyak lagi.
Untuk membuat sebuah chatbox yg bagus , maka kita harus bisa memilih chatbox seperti apa sih yg cocok untuk blog kita dan supaya tampilanya semakin menarik, seperti menyelaraskan warna pada chatbox kita dengan warna blog kita dan ini pastinya akan membuat tampilan blog kita akan semakin menarik dan tentu saja para pembaca atau pengunjung blog kita akan merasa nyaman ketika membaca artikel2 yang mereka cari.

Untuk membuat chatbox, sangatlah mudah karna sudahbanyak situs2 penyedia chatbox gratisan yg kualitasnya berbeda - beda, dan kali ini saya akan berbagi sebuat chatbox yg menurut saya sangat bagus dan cocok untuk semua jenis blog atau website sobat.

Baiklah, ikuti langkah - langkah dibawah ini :

1). Yang pertama kita harus lakukan ialah menuju situs penyedia chatbox gratis ini, ini saya rekomendasikan untuk semua blogers --> http://www.smartchatbox.com/ , mengapa harus menggunakan chatbox dari smartchatbox ? jawabanya karna chatbox yg disediakan bisa di atur sesuai keinginan, meliputi ukuran, lebar dan kita bisa menentukan akan memilih tema yg mana karna tema yg disediakan sangat menarik dan cukup banyak.

2). Setalah kalian masuk ke situs smartchatbox, langsung saja kalian mendaftar, dan setelah mendaftar atau membuat akun, kemudian kalian masuk ke akun kalian.

3). Kemudian kita masuk ke menu "CREATE" seperti yg terlihat di gambar ini dibawah :


4). Dan kita akan dibawa menuju halaman penyetingan , seperti gambar dibawah ini :


Keterangan : 
1. Specify seting = sebagai pengaturan lebar dan tingginya dan jangan lupa juga tambahkan url atau nama website atau blog kalian.
2. Select Background = Kita pilih background mana yg akan kita gunakan pada chatbox kita, dan kalian pun bisa menggunakan yg transparent (otomatis menyesuaikan warna dengan warna latar blog kalian)

Untuk memudahkan melihat preview atau tampilanya kalian bisa melihat dibagian bawah "Previes of your Chatbox".

5). Selanjutnya dibagian bawah, kita buat username dan password untuk login nantinya sebagai admin di chatbox blog kalian, lihat gambar dibawah ini : 

Kalian buat username dan password nya yg dimana nantinya password ini akan kita gunakan untuk login sebagai admin di chatbox di blog kita.

6). Kemudian kalau kalian sudah yakin dengan chatbox yg sudah kalian buat dan sesuai dengan keinginan, maka selanjutnya kalian klik "Generate Code Of My Smart Chatbox" , 

7). Setelah itu kita , langsung tekan "Skip This step". 


8). Nah sekarang kita sudah mendapatkan code script yg selanjutnya bisa kalian bisa letakan di blog kalian dimana saja dimana yg kalian inginkan.


9). Kalian simpan dan kemudian lihat hasilnya.


DAN APABILA KALIAN INGIN MELETAKAN CHATBOX DISAMPING KANAN BLOG KALIAN SEPERTI BLOG SAYA INI , kalian tinggal ikuti langkah2 dibawah ini :

1. Kalian pastekan ke blog kalian code script dibawah ini :

<!-- right hidden chatbox by http://tipsbloggerzacky.blogspot.com START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S2EvgsgQ7nI/AAAAAAAAA_k/gq8QRLZcHFs/s400/cbblue.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
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>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

<!-- KODE SHOUTMIX ANDA DISINI -->

<script type="text/javascript" src="http://www4.smartchatbox.com/shoutbox/start.php?key=11111111"></script>

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="https://www.facebook.com/septian.TraineeSM" target="_blank">
Contact admin on facebook!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by http://tipsbloggerzacky.blogspot.com END -->

Penjelasan : untuk code script yg berwarna merah diatas, kalian harus menggantinya dengan code script yg kalian sudah buat tadi di smartchatbox !

SETELAH SELESAI, kalian tinggal simpan, dan lihat hasilnya.


SEMOGA ARTIKEL INI DAPAT MEMBANTU SOBAT AJJIBBERSSS SEMUA :)
Dan jangan lupa nantikan artikel2 menarik lainya . dadaaaaaaaaaaa







Terimakasih sudah membaca Cara Buat Chatbox Keren Untuk Blog

« Previous
« Prev Post
Next »
Next Post »