Tutorial Membuat Chatango Melayang di Blog

CodePelajar.com - Selamat datang Sobat blogger, kali ini saya akan berbagi tutorial sekaligus trik unik menggunakan HTML, CSS, dan sedikit kode Javascript. Dalam tutorial ini akan menjelaskan cara membuat Custom Bubble Chat dengan menggunakan layanan Chatango.

Apa itu Chatango

Chatango adalah sebuah plugin layanan live chat untuk website. Layanan chat Chatango biasanya banyak di pakai oleh situs-situs Fanshub dan Fanshare Anime, namun tidak luput juga situs dengan kategori lain juga memasangnya. Jika penasaran cara memasang chatango di situs sobat, bisa dengan menggunjungi tautan berikut:

Sama halnya dengan layanan chat lain, Chatango juga menyediakan editor untuk custom styling sebelum plugin siap dipasang di blog sobat. Akan tetapi chatango hanya menyediakan 3 gaya saja untuk menampilkan chatboxnya yaitu Box, Tab, dan Ticker

Namun ketebatasan itu bisa di akali dengan kreatifitas, salah satunya membuat wadah sendiri untuk menampilkan chat box Chatango. Kali ini chatbox akan dibuat seperti chat bubble. Untuk demonstrasinya bisa dilihat disini


Langkah Membuat Chatango Melayang

Baiklah sekarang mari kita maju kelangkah cara membuatnya seperti berikut

  • Pertama, sobat buat dahulu plugin chatango milik sobat yang akan ditempelkan nantinya
  • Jika sudah maka tempelkan kode HTML di bawah ini di atas </body>
  • 
    <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>
    
    
  • Selanjutnya tempel kode CSS juga , masukan tepat di atas </b:skin>
  • 
    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);
    }
    
    
  • Selanjutnya letakan Javascript berikut tepat dibawah </body>
  • 
    <script>/*<![CDATA[*/
    // fungsi untuk menampilkan 
    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>
    
    
  • Selesai dan Check Kembali Blog sobat.
Jika tidak berhasil juga coba perhatikan peletakan kodenya. Kalau sobat masih bingung bisa tanyakan dikomentar dibawah

Sangat mudah ternyata cara menerapkannya. Dengan memasang Chatango seperti ini akan terlihat lebih modern dan juga keren.

Itulah tutorial cara kustom chatango melayang yang bisa kamu buat untuk blog sobat. Masih banyak memang layanan live chat yang lebih mudah dan simple dari pada chatango namun tidak ada salahnya mencoba metode ini kan sobat Codepelajar? :3

Jangan lupa untuk share dan komennya sobat!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel