Cara Memasang Chatbox Tlk.io Di Blog

Cara Memasang Chatbox Tlk.io Di Blog - chatbox atau form chatting menurut saya sangat berguna untuk membangun relasi atau hubungan baik antara admin blog dengan user atau antara user dengan user. agar terjalian komunikasi baik sehingga para user menjadi betah berada di blog tersebut baik tertarik membaca artikel nya atau sekedar chat menggunakan form chatbox yang tersedia. sekarang sudah teredia banyak sekali layanan chatbox yang ditawarkan baik secara gratis maupun yang berbayar di internet dan kalian tinggal memilih sendiri ingin memasangkan yang mana.

contoh chatbox yang bisa kalian coba diantaranya : chatango.com, cbox.ws, chatroll.com, tlk.io dll.

Dari beberapa chatbox saya mencoba memasangkan chatbox dari tlk.io di blog saya ini. Karena menurut saya chatbox tlk.io memiliki tampilan yang cukup simple tapi elegan dan proses pendaftarannya cukup mudah. Sedangkan user yang ingin bergabung tinggal memasukkan nama atau menggunakan akuan facebook dan twitter untuk memulai chatting.

Berikut cara mendaftar chatbox tlk.io :

• Pertama buka situs tlk.io

• Kemudian masukkan nama channel yang kalian inginkan cari yang masih tersedia.

• Lalu silahkan join dengan akun Twitter atau Facebook dan klik become moderator.
• Sekarang tinggal memasangkan kode chatbox pada blog kalian.

Secara standar kode chatbox tlk.io seperti dibawah ini kalian bisa lihat pada bagian embed di tlk.io

<div id="tlkio" data-channel="marwanto606" style="width:100%;height:400px;"></div><script async src="http://tlk.io/embed.js" type="text/javascript"></script>

Ganti marwanto606 dengan nama chanel kalian.

Namun agar tampilan chatbox lebih menarik kalian bisa mambuatnya menjadi showhide (tampil hilang) seperti pada blog kompiajaib berikut tutorialnya silahkan kalian baca dan praktikkan sendiri disini.

Untuk tampilan chatbox lainnya kalian bisa coba tampilan showhide (tampil hilang) berikut ini

Berikut kodenya silahkan kalian coba sendiri, taruh kode di bawah ini diatas kode </body> blog kalian

<style type="text/css">

.floating-ai{

position:fixed;

right:0;

bottom:0;

z-index:99;

}

.floating-ai-head a{

cursor:pointer;

padding:8px 10px;

background:#0dbdeb;

color:#fff;

font-weight:400;

display:inline-block;

transition:all .3s linear;

}

.floating-ai-head a:hover{

background:#000000;

color:#fff;

text-decoration:none;

}

.floating-ai-body{

height:100%;

background:#fff;

display:none;

}

.floating-ai-head{

text-align:right;

}

.floating-ai-body .tlkio{

margin:0;

display:block!important;

}

.floating-ai-body{

-moz-box-sizing:initial;

-webkit-box-sizing:initial;

box-sizing:initial;

}</style>

<div id="tlkio" data-channel="marwanto606" style="width:100%;height:400px;"></div><script async src="http://tlk.io/embed.js" type="text/javascript"></script>

<script type='text/javascript'>

$("body").append('<div class="floating-ai"><div class="floating-ai-head"><a>Chat</a></div><div class="floating-ai-body"></div></div>'),$("#tlkio").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())});

</script>

Ganti marwanto606 dengan nama chanel kalian.

Catatan : pastikan dulu blog kalia sudah bervisitor lumayan karena agar tidak pedih saat melihat tampilan chat box yang kosong wkwk

Baca juga : Cara Memasang CSE Pada Theme Superfast