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 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.
<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 :v
Baca juga : Cara Memasang CSE Pada Theme Superfast
0 Comment "Cara Memasang Chatbox Tlk.io Di Blog"
Posting Komentar
Pembaca yang baik selalu meninggalkan jejaknya.
Dilarang berkomentar menggunakan LINK AKTIF.