Script Chatango Melayang

Codepelajar – Chatango didirikan pada tahun 2004 oleh Alex Mazzolini, seorang pengembang web asal Amerika Serikat. Ide di balik platform ini adalah menyediakan layanan pesan instan yang dapat diintegrasikan dengan situs web dan blog. Dengan demikian, pemilik situs dapat meningkatkan interaksi dengan pengunjungnya, sementara pengguna dapat berkomunikasi dengan anggota lainnya dalam sebuah komunitas.

Cara membuat chatango melayang di bawah halaman website:

Cara ini dapat digunakan untuk wordpress, Blogger dan website yang ingin di tempelkan chatango di dalamnya.

CSS

span.ctg-lock {
    position: fixed; 
    height: 50px;
    cursor: pointer;
    width: 50px;
    bottom: 0;
    border-radius: 50px;
    left: 0;
    background: #444;
    transition: .5s;
    transform: translate(20%,-20%);
}
span.ctg-lock::before {
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 30px;
    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#ctg {
    position: fixed;
    height: 400px;
    width: 300px;
    bottom: 0;
    left: 0;
	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);
}

HTML

<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":"lah","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>

Java 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')
}

Demo

Daftar terlebih dahulu ke chatango dengan adanya fitur dari chatango ini akan memberikan pengunjung kebebasan dalam berinteraksi di dalam website.