Cara Membuat dan Memasang Tombol Chat | Whatsapp, Messenger, Group, Email di Blogger

Tombol chat atau yang biasa dibilang Live Chat pada sebuah halaman website atau blog yang berfungsi sebagai :
Mempermudah pengunjung untuk berkomunikasi dengan admin jika memang ada hal yang ingin ditanyakan atau disampaikan.
Memasang tombol Live Chat tidak sama sekali diharuskan, namun bisa juga diwajibkan bagi website yang berbisnis, berualan, jasa dan lainnya. Tidak lain halnya dengan blog, jika memang anda memiliki blog yang bertujuan untuk jualan atau semacam bisnis, anda harus memasang widget Live chat ini.
Tombol chat ini bisa berdampak positif buat web atau blog anda yang dimana pengujung sangat mudah menghubungi anda dan mendapatkan kepercayaan yang luas tentang bisnis anda.

Pada postingan kali ini, Calon Desain akan berbagi tutorial Cara Membuat dan Memasang Tombol Chat yang dimana pengunjung bisa memilih baik itu via WhatsApp, Massagger, Bergabung dengan group atau pun kirim pesan langsung ke email. Contohnya seperti gambar dibawah ini:
Sebelum memulai, pastikan anda sudah berada di depan laptop atau komputer anda dan sudah login ke akun blogger anda.
Langkah pertama :
Pada sidebar sebelah kiri anda klik tema atau theme, kemudian cari kode </head> lalu anda salin kode CSS dibawah ini dan tempelkan tepat diatas kode </head>.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <style type="text/css">
        .robbi-container *{-webkit-box-sizing:border-box;-khtml-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.robbi-container{position:fixed;top:auto;left:auto;bottom:0;right:18px;text-align:right;font-family:helvetica;font-size:13px;line-height:1.4em;max-width:400px;max-height:100%;overflow-y:auto;z-index:100000;}
.robbi-container.left-side{right:auto;left:0;text-align:left;}
.robbi-container p:first-child{margin-top:0;}
.robbi-container p:last-child{margin-bottom:0;}
.robbi-container a{text-decoration:none;}
.robbi-container .robbi-clearfix:before,
.robbi-container .robbi-clearfix:after{content:'';display:block;clear:both;}
.robbi-container .robbi-box{text-align:left;background:white;border:1px solid #f5f5f5;box-shadow:3px 3px 3px rgba(0, 0, 0, .02);padding:20px 20px 10px;margin:20px 20px 0;border-radius:2px;position:relative;border-radius:6px 6px 0 0;display:none;transition:all .2s;}
.robbi-container .robbi-box.show{display:block;}
.robbi-container .robbi-box:before,
.robbi-container .robbi-box:after{content:'';position:absolute;bottom:-7px;right:22px;width:13px;height:13px;background:white;transform:rotate(45deg);z-index:1;border:1px solid #f5f5f5;box-shadow:3px 3px 3px rgba(0, 0, 0, .02);}
.robbi-container.left-side .robbi-box:before,
.robbi-container.left-side .robbi-box:after{right:auto;left:22px;}
.robbi-container .robbi-box:before{z-index:2;box-shadow:none;background:white;transform:none;bottom:0;width:19px;right:17px;border-color:white;}
.robbi-container .robbi-box ul{list-style:none;padding:0;margin-top:15px;}
.robbi-description{border-radius:6px 6px 0 0;background:rgba(69, 90, 100, .9);padding:20px;padding-right:30px;margin:-20px -20px 10px;color:white;}
.robbi-description p{color:inherit;}
.robbi-description p:last-child{margin-bottom:0;}
.robbi-container .robbi-account{color:inherit;display:block;padding:10px 10px;margin:0 -10px -1px;border-radius:10px;position:relative;z-index:3;}
.robbi-container .robbi-account:not(:last-child):after{content:'';display:block;background:#f5f5f5;height:1px;width:100%;max-width:calc(100% - 20px);position:absolute;bottom:0;left:10px;}
.robbi-container .robbi-account:first-child{margin-top:-10px;}
.robbi-container .robbi-description ~ .robbi-people .robbi-account:first-child{margin-top:0;}
.robbi-container .robbi-account:last-child{margin-bottom:0;border-bottom:none;}
.robbi-container .robbi-account:hover{background:#f5f5f5;border-color:transparent;}
.robbi-container .robbi-account .robbi-face{width:40px;height:40px;margin-right:15px;float:left;position:relative;}
.robbi-container .robbi-account .robbi-face.no-image:before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:transparent url(//cdn.hurok.com/wp-content/plugins/wpt-whatsapp/assets/images/logo-green-small.png) center center no-repeat;background-size:100%;z-index:1;}
.robbi-container .robbi-account.robbi-group .robbi-face.no-image:before{background:transparent url(//cdn.hurok.com/wp-content/plugins/wpt-whatsapp/assets/images/logo-group.png) center center no-repeat;}
.robbi-container .robbi-account .robbi-face:after{content:'';display:block;width:15px;height:15px;position:absolute;bottom:0;right:-5px;background:transparent url(//cdn.hurok.com/wp-content/plugins/wpt-whatsapp/assets/images/logo-green-small.png) center center no-repeat;background-size:cover;z-index:4;}
.robbi-container .robbi-account.robbi-group .robbi-face:after{background:transparent url(//cdn.hurok.com/wp-content/plugins/wpt-whatsapp/assets/images/logo-group.png) center center no-repeat;background-size:contain;}
.robbi-container .robbi-account .robbi-face.no-image:after{content:none;}
.robbi-container .robbi-account .robbi-info{position:relative;top:2px;color:inherit;float:left;width:calc(100% - 55px);}
.robbi-container .robbi-account .robbi-title{font-size:11px;line-height:100%;opacity:.5;}
.robbi-container .robbi-account .robbi-name{font-weight:bold;display:block;}
.robbi-container .robbi-account .robbi-name:only-child{position:relative;top:10px;}
.robbi-container .robbi-account img{width:100%;height:100%;display:block;border-radius:50px;overflow:hidden;position:relative;z-index:2;}
.robbi-container .robbi-handler{display:inline-block;vertical-align:top;text-decoration:none;color:white;background:rgba(69, 90, 100, .9);padding:10px 15px;border-radius:50px;line-height:120%;white-space:nowrap;text-align:center;transition:all .3s;position:relative;margin:20px;z-index:3;}
.robbi-container.circled-handler .robbi-handler{width:60px;height:60px;box-shadow:0 1px 6px rgba(0, 0, 0, .06), 0 2px 20px rgba(0, 0, 0, .16);}
.robbi-container.circled-handler .robbi-handler:hover{box-shadow:0 2px 8px rgba(0, 0, 0, .09), 0 4px 20px rgba(0, 0, 0, .24);}
.robbi-container .robbi-handler:hover{box-shadow:3px 3px 3px rgba(0, 0, 0, .05);cursor:pointer;}
.robbi-container .robbi-box ul a{padding:7px 14px;background:#445963;}
.robbi-container .robbi-handler img{max-width:15px;fill:#fff;display:inline-block;vertical-align:top;margin-right:5px;}
.robbi-container.circled-handler svg{margin:0;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%) scale(1.7);}
.robbi-container .robbi-close{display:block;width:15px;height:15px;position:absolute;top:7px;right:7px;opacity:.5;visibility:hidden;transition:opacity .3s;}
.robbi-container .robbi-description + .robbi-close{visibility:visible;}
.robbi-container .robbi-close:hover{cursor:pointer;opacity:1;}
.robbi-container .robbi-close:before,
.robbi-container .robbi-close:after{content:'';display:block;background:white;width:15px;height:3px;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%) rotate(45deg);}
.robbi-container .robbi-close:after{transform:translateY(-50%) translateX(-50%) rotate(-45deg);}
.whatsapp-custom-styled{display:inline-block;line-height:100%;padding:10px 15px;margin:2px 0;border-radius:2px;text-decoration:none !important;border:none !important;transition:background .15s, color 0s;}
.whatsapp-custom-styled:hover{text-decoration:none !important;border:none !important;box-shadow:3px 3px 3px rgba(0, 0, 0, .1);}
.whatsapp-custom-styled svg{position:relative;top:2px;margin-right:5px;}
.whatsapp-custom-styled svg:only-child{margin-right:0;}
.whatsapp-custom-styled.no-icon{padding:13px 15px;}
.whatsapp-custom-styled.no-icon svg{display:none;}
.widget .whatsapp-custom-styled{transition:background .15s, color 0s;}
.whatsapp-custom-styled.block-level{display:block;text-align:center;line-height:1.3em;padding-top:10px;padding-bottom:10px;}
.whatsapp-custom-styled.block-level.align-left{text-align:left;}
@media screen and (min-width:1025px){.robbi-flag:after{content:'desktop';display:none;}
.robbi-container.circled-handler-on-desktop .robbi-handler{width:60px;height:60px;box-shadow:0 1px 6px rgba(0, 0, 0, .06), 0 2px 20px rgba(0, 0, 0, .16);}
.robbi-container.circled-handler-on-desktop .robbi-handler:hover{box-shadow:0 2px 8px rgba(0, 0, 0, .09), 0 4px 20px rgba(0, 0, 0, .24);}
.robbi-container.circled-handler-on-desktop .robbi-handler .text{display:none;}
.robbi-container.circled-handler-on-desktop svg{margin:0;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%) scale(1.7);}
}
@media screen and (max-width:782px){.robbi-flag:after{content:'mobile';display:none;}
.robbi-container.circled-handler-on-mobile .robbi-handler{width:60px;height:60px;box-shadow:0 1px 6px rgba(0, 0, 0, .06), 0 2px 20px rgba(0, 0, 0, .16);}
.robbi-container.circled-handler-on-mobile .robbi-handler:hover{box-shadow:0 2px 8px rgba(0, 0, 0, .09), 0 4px 20px rgba(0, 0, 0, .24);}
.robbi-container.circled-handler-on-mobile .robbi-handler .text{display:none;}
.robbi-container.circled-handler-on-mobile svg{margin:0;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%) scale(1.7);}
}.robbi-container .robbi-handler,
.robbi-description{background-color:rgba(15, 189, 58, 1);color:rgba(255, 255, 255, 1);}
.robbi-container .robbi-box{background-color:rgba(255, 255, 255, 1);color:rgba(85, 85, 85, 1);}
.robbi-container .robbi-box:before,
.robbi-container .robbi-box:after{background-color:rgba(255, 255, 255, 1);border-color:rgba(255, 255, 255, 1);}
.robbi-container .robbi-close:before,
.robbi-container .robbi-close:after{background-color:rgba(255, 255, 255, 1);}
.robbi-container{max-width:400px;}
.robbi-wc-button{background-color:rgba(30, 255, 0, 0.9);color:rgba(255, 255, 255, 1);}
.robbi-wc-button svg{fill:rgba(255, 255, 255, 1);}
.robbi-wc-button:hover{background-color:rgba(44, 184, 26, 0.9);color:rgba(255, 255, 255, 1);}
@media screen and (max-width : 400px) {
.robbi-container{max-width:100%;}
}
.robbi-container .robbi-box{width:calc(400px - 80px);max-width:calc(100% - 40px);}
.robbi-container .robbi-account:hover{background-color:rgba(245, 245, 245, 1);color:rgba(85, 85, 85, 1);}
.robbi-container .robbi-account:not(:last-child):after{background-color:;}
.robbi-container .robbi-account:hover:after {
background-color: rgba(245, 245, 245, 1);
}

 


 


.pulse-button {
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
  -webkit-animation: pulse 1.5s infinite;
}

.pulse-button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

    </style>

Setelah itu, anda copy kode JavaScript dibawah ini, lalu tempelkan tepat diatas tag penutup </body>


>code>
<script type="text/javascript">
    var robbi = $("body").find('.robbi-container'), robbiBox = robbi.find('.robbi-box'), robbiToggleBox = function(e) { robbiBox.toggleClass('show');};
$(".robbi-handler").on("click",function(){
robbiToggleBox(); 
});
$(".robbi-close").on("click",function(){
robbiToggleBox();
});


</script>

Kemudian anda save atau simpan tema.
Langkah kedua:
Pada sidebar kiri anda klik Tata Letak, kemudian tambahkan gadget lalu pilih  HTML/JavaScript. Lihat gambar dibawah ini:

Silahkan anda salin kode dibawah ini :

<div class="forMobile wtsp " style="position:fixed;bottom:10px;right:250px;z-index:99999">


  
  <div class="robbi-container pulse-button" data-delay-time="0" data-inactive-time="0" data-scroll-length="0" data-auto-display-on-mobile="on">

            <div class="robbi-box" pulse-button> 
                <div class="robbi-wrapper ">
                
                                        
                    <div class="robbi-description ">
            <img src=" https://1.bp.blogspot.com/-mvfHlLh7nCI/Xe9QhvffNRI/AAAAAAAAAKI/RWsNKFF7F2IMp0Y-ZESBXJ0ovqkaWBQ_wCLcBGAsYHQ/s1600/20191210_145919.png" style="max-width:30px;float:left;margin-right: 5px;margin-top: 10px;">
            
                        <p style="font-size: 18px;"> Calon Desain</p>
                    </div>
                    
                                        <span class="robbi-close"></span>
                    <div class="robbi-people">
                        
                                                
                                                
                        <a href="https://api.whatsapp.com/send?phone=081585398339&amp;text=hallo..." target="_blank" class="robbi-account" data-number="905546654400" data-auto-text="Calon Desain">
                            <div class="robbi-face"><img src="https://1.bp.blogspot.com/-FfErFIDruLc/XfA7icoHp4I/AAAAAAAAALY/S50-ZWx3OWU9Vid539mBbEJpICvf8b4NgCLcBGAsYHQ/s320/soon-873316_640.png" onerror="this.style.display='none'"></div>
                            <div class="robbi-info">
                                
                                                                <span class="robbi-title">Hubungi Kami! </span>                                
                                                                
                                <span class="robbi-name">Ada yang bisa saya bantu?</span>
                                
                            </div>
                            <div class="robbi-clearfix"></div>
                        </a>
            
            
            <a href="https://m.me/mysundaku" target="_blank" class="robbi-account" data-number="905546654400" data-auto-text="Calon Desain">
                            <div class="robbi-face"><img src="https://1.bp.blogspot.com/-trkgBHkU0JA/XfA8gptltvI/AAAAAAAAALk/sTptKs1RvsMexOMZc8ntZcwF8quhZng1QCLcBGAsYHQ/s320/facebook-667456_640.png" onerror="this.style.display='none'"></div>
                            <div class="robbi-info">
                                
                                                                <span class="robbi-title">Live Chat Via Facebook</span>                                
                                                                
                                <span class="robbi-name">Ada yang  bisa saya bantu ?</span>
                                
                            </div>
                            <div class="robbi-clearfix"></div>
                        </a>
            
            
            <a href="https://chat.whatsapp.com/HxF1UfFg9yOJgkeqZdXSET" target="_blank" class="robbi-account" data-number="905546654400" data-auto-text="Calon Desain">
                            <div class="robbi-face"><img src="https://1.bp.blogspot.com/-72w7Dc8Orp0/XfA9qDyoyyI/AAAAAAAAAL0/gaihfmt5VRk9psWEUKTI4iafRKIDue3DwCLcBGAsYHQ/s320/group-1824145_640.png" onerror="this.style.display='none'"></div>
                            <div class="robbi-info">
                                
                                                                <span class="robbi-title"> Gabung Group WhatsApp</span>                                
                                                                
                                <span class="robbi-name">Bergabung Bersama Kami.</span>
                                
                            </div>
                            <div class="robbi-clearfix"></div>
                        </a>
            
            
            <a href="mailto:calonseo.mail@gmail.com" target="_blank" class="robbi-account" data-number="905546654400" data-auto-text="Calon Desain">
                            <div class="robbi-face"><img src="https://1.bp.blogspot.com/-TkAwJGjxmtU/XfA8-L93d7I/AAAAAAAAALs/wuaaF5Q8r_k2ZV_ZuNStrLD0-4Gn1sjHQCLcBGAsYHQ/s320/mail-1454731_640.png" onerror="this.style.display='none'"></div>
                            <div class="robbi-info">
                                
                                                                <span class="robbi-title">Kirim Pesan via E-mail</span>                                
                                                                
                                <span class="robbi-name">Kami akan segera respon pesan anda!</span>
                                
                            </div>
                            <div class="robbi-clearfix"></div>
                        </a>
            
            
            
            
            
                        
                                                
                                                
                        
                        
                                                
                    </div>
                </div>
            </div> 
            <span class="robbi-handler">
                <span class="text" style="font-size: 16px;"><img src="https://1.bp.blogspot.com/-cs70gGN37wA/XfA-9HbFLPI/AAAAAAAAAME/dSY_iABQ8UYGjEKGC6bzqZMHnLyDC1nZgCLcBGAsYHQ/s320/chat-2389223_640.png" style="max-width:20px;float:left;margin-right: 5px;margin-top: -3px;"> Live Chat</span>            </span> 
        </div>
</div>

KETERANGAN:
                Silahkan anda ganti url gambar atau icon yang diberi blok warna hijau dengan url gambar yang anda inginkan.
                 Silahkan anda ganti text yang saya beri blok warna kuning sesuai keinginan dan juga url tautan grup whatsapp, email, massagger, dan nomor whatsapp anda.

Setelah itu, anda tempelkan kode diatas yang sudah anda edit atau anda rubah ke dalam konten JavaScript, seperti contoh pada gambar dibawah ini:

Silahkan anda lihat hasilnya.
Jika tidak berfungsi atau pun adanya eror anda pastikan kembali kodenya terpasang dengan benar pada template anda. Atau anda bisa berkomentar dibawah dan kalau perlu anda hubungi saya bisa melalui contact form atau pun live chat langsung.
Demonya anda bisa lihat pada channel youtube saya dibawah ini:


Semoga bisa bermanfaat.

Terima kasih.