Cara Memasang Chatango Di Blogger Dengan Efek Melayang

Cara Memasang Chatango Di Blogger Dengan Efek Melayang - Yahallo minna , untuk blog khusus fanshare / fansub fitur chatbox dari Chatango sudah menjadi hal yang wajib ada di situs.Chatango sendiri biasanya digunakan  untuk mempererat tali silahturahmi antara admin dengan pengunjungnya :V .

Yaa gimana ... kadang ,bayangin aja kalau ada yang mau request anime ? terus dia harus bolak- balik nanya ke akun sosial medianya admin gitu? kalau ada fitur chat di website kan jadi lebih enak.

Nah kali ini saya ingin membagikan tutorial memasang chat box Chatango di blog tapi kan dah banyak yang bahas? muehehe disini agak berbeda karena kita buat versi melayang jadi mirip kayak live chat.

Ok tanpa banyak cincong seperti biasa langsung aja cuss.

Untuk membuat widget chatango nya terlebih dahulu kalian kunjungi website berikut :

http://chatango.com/creategroup

Daftar seperti biasa dengan mengklik "Get Started" di pojok kanan atas.Jika sudah berhasil daftar nanti akan dialihkan ke dashboard baru.

Akan ada beberapa pilihan tampilan / template , pilih pada bagian box view saja.

Setelah itu , kustom tampilan Chatango sesuai yang kalian inginkan .Jangan lupa untuk isi .Kalau sudah semua klik "Create Group"

Akan muncul sebuah embed kode .Nah silahkan kamu salin terlebih dahulu kode yang tadi di Notepad atau apalah terserah.

Cara Membuat Chatango Dengan Efek Melayang Di Blog

1.Buka Blogger > Tema > Edit Html > masukan css berikut tepat diatas </head>

<style>
/*Chatango Melayang*/
span.ctg-lock{z-index: 9999;position:fixed;height:45px;cursor:pointer;width:45px;border-radius:50%;bottom:0;left:0;background:#2196f3;transition:.5s;transform:translate(25%,-10%)}
span.ctg-lock::before{content:"f007";position:absolute;top:50%;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;left:50%;color:white;transition:.5s;transform:translate(-50%,-50%)}
span.ctg-lock:hover::before{transform:translate(-50%,-50%) scale(2)}
span.ctg-lock.hide{transform:translate(20%,-20%) scale(0.1);opacity:0}
div#HTML10 h2{display:none}
div#ctg{position:fixed;height:400px;width:300px;bottom:0;left:0;z-index:99999;overflow:hidden;border-radius:10px;background:#444;transition:.5s;transform:translate(-100%,-10%)}
div#ctg.show{transform:translate(10%,-10%)}
.ctg-responsive{position:relative}
span.ctg-close{position:absolute;top:0;right:0;width:25px;height:25px;background:#222;z-index:1;cursor:pointer}
span.ctg-close::before{content:"";position:absolute;height:2px;width:50%;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}
span.ctg-close::after{content:"";position:absolute;height:2px;width:50%;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}
</style>

2.Setelah itu cari kode </body> dan letakan source Javascript berikut tepat diatasnya : 

<script>
function ctgShow(){
 document.getElementById('ctg').setAttribute('class','show')
 document.getElementsByClassName('ctg-lock')[0].classList.add('hide')
}

// fungsi untuk menyembunyikan
function ctgClose(){
 document.getElementById('ctg').setAttribute('class','')
 document.getElementsByClassName('ctg-lock')[0].classList.remove('hide')
}

</script>

3.Jika sudah klik Simpan Tema , setelah itu ganti ke dashboard Tata Letak > Tambahkan Widget Baru > Html & Javascript , kemudian masukan kode berikut ini.

<span class='ctg-lock' onclick="ctgShow()"></span> <!-- untuk tombol menampilkannya -->

<!--- div pembungkus untuk chatango -->
<div id='ctg'>
<span class='ctg-close' onclick='ctgClose()'></span> <!-- tombol close -->

<!-- code chatango disini // ganti dengan plugin chatango sobat -->
<script id="cid0020000194729270333" data-cfasync="false" async src="https://st.chatango.com/js/gz/emb.js" style="width: 100%;height: 100%;">{"handle":"kontolah","arch":"js","styles":{"a":"383838","b":100,"c":"FFFFFF","d":"FFFFFF","k":"383838","l":"383838","m":"383838","n":"FFFFFF","p":"10","q":"383838","r":100,"fwtickm":1}}</script>
</div>

Nah kan source diatas itu pake chatango saya silahkan kalian ganti scriptnya dengan plugin chatango yang sudah kalian buat tadi pada kode yang ditandai.Pastikan width:100% dan juga height:100% agar tampil responsive.

Demo

Ok itulah tadi Cara Memasang Chatango Di Blogger Dengan Efek Melayang .Jika ada pertanyaan terkait tutorial jangan sungkan untuk tulis di kolom komen , seee yaaa.