Tips Trik Blog: Membuat Kotak Chat atau Chat Box

Selamat Datang di Tips Trik Blogs, Blog yang isinya Tips Trik Blog | Free Blogger Widgets | Informasi Menarik Di Bidang Teknologi dan IT.
Tips Trik Blog kali ini akan membahas mengenai bagaimana cara untuk membuat kotak chat atau yang biasa dikenal dengan nama Chat Box, karena masih banyak yang tidak mengetahui bagaimana cara untuk membuatnya dan memasangnya di site ataupun Blog sobat.

Kotak Chat atau Chat Box merupakan salah satu dari widgets di Blog yang wajib ada, karena selain untuk menuliskan jejak bagi visitor atau pengunjung yang datang ke blog kita juga sebagai sarana untuk berchatingan selain memberikan komentar.

lanjut ke bawah,
bagaimana membuat Membuat Kotak Chat menggunakan Cbox.

1. untuk membuat kotak chat menggunakan aplikasi Cbox maka sobat perlu mendaftar dilink dibawah ini..

http://www.cbox.ws/

2. Setelah dikirim, bukalah akun email yang sobat daftarkan Cboxnya, lihat apakah ada kode verifikasinya? jika ada kliklah untuk melanjutkan membuat kotak chatnya.

3. setelah itu sobat akan mendapatkan sebuah kode HTML chat box yang harus sobat taruh di blog sobat,

4. taruh kode HTML kotak chat sobat ditempat yang kira-kira cukup strategis di blog sobat..
so, kotak blog sobat sudah selesai dibuat..

Sekian Tips Trik Blog saya kali ini, terima kasih sudah menyimak, dan jangan lupa untuk memberikan komentar yang positif demi kemajuan blog ini.
Jika ingin melihat lebih banyak Tips Trik Blog lebih banyak lagi, bisa kunjungi Tips Trik Blogs, disana juga terdapat Free Blogger Widgets alias widgets blog gratis yang bisa anda terapkan untuk mempercantik tampilan Blog anda.

Read More

Tips Trik Blog: Script Membuat Kotak Chat (Chat Box) Melayang

Mungkin sobat sering melihat blog-blog dengan tampilan chat box (kotak chat) melayang disebelah kanan atas atau kiri yang jika kita klik logo "chat"nya, maka akan muncul kotak chatnya.
Berikut ini akan sedikit saya jelaskan bagaimana cara untuk Membuat Kotak Chat (Chat Box) Melayang

Tanpa basa basi lagi.. sobat login dulu kedalam akun blogger sobat.
langsung saja ke cara-caranya:

1. masuk ke menu rancangan
2. pilih elemen halaman.
3. pilih javascript/html
4. copy dan pastekan kode berikut 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/AVvXsEh6VxZu7SC42tRkN-d1rVR8PmfQiWEqG6CGzliTfHPHYlazIxsfGKdTZeRK_AzafRDGwCsdiKIREV8cBSCM9m-__xveKbCBpDuov3L9frLkSH5NPfGwzzYwJNjbNmty5VlZ5xWvUHELDq8/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>

<div id="hcr">

<div class="hcrtab" onclick="showHidehcr()"> </div>

<div class="hcrcontent">

<!-- MASUKAN KOTAK CHAT ANDA DISINI -->

<br />

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<a href="http://www.fadlypuccino.co.cc/" target="_blank">

Get this widget!

</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>

5.lalu anda simpan dan lihatlah hasilnya.

Selamat bereksperimen..

Read More