Cara Pasang Widget WhatsApp Di Blogger Keren - Panduan Blogger
Panduan Code
Panduan Code Saya menyediakan berbagai tutorial pemrograman, info teknologi, internet marketing, dan lain-lain.

Cara Pasang Widget WhatsApp Di Blogger Keren

Cara Pasang Widget WhatsApp Di Blogger Keren sebagai fitur live chat yang aman, mudah digunakan, dan interaksi pengunjung semakin meningkat.

Daftar Isi [Tampil]

Cara Pasang Widget WhatsApp Di Blogger Keren sebagai fitur live chat yang aman, mudah digunakan, dan interaksi pengunjung semakin meningkat.

Kenapa harus widget WhatsApp?, karena WhatsApp adalah sosial media yang paling banyak digunakan dan paling sering digunakan oleh orang.

Selain itu kerahasiaan chat antara pemilik blog dengan pengunjung blog pasti aman, oleh sebab itu pengunjung dan pemilik blog dapat lebih leluasa untuk menyampaikan sesuatu.

Penasaran seperti apa widget WhatsApp yang akan kita pasang pada kali ini?, coba cek blog blogger.panduancode.com dan lihat tombol tanya kami dan silahkan cek dan uji coba.

Jika kalian ingin memasang widget WhatsApp seperti itu maka ikuti tutorial dibawah ini.

Cara Pasang Widget WhatsApp Di Blogger

Cara Pasang Widget WhatApp Di Blogger

1. Buka edit HTML Template


Kemudian agar lebih mudah dalam tahap pemasangan widget WhatsApp kalian dapat mengcopy semua kode template dan paste pada kode editor, contohnya Visual Studio Code dan lain-lain.

Lihat gambar dibawah ini untuk lebih jelasnya.

Edit HTML Template Blogger

Seperti gambar diatas caranya mudah kalian masuk ke menu Tema lalu klik tombol titik tiga, setelah itu akan muncul menu popup dan kalian pilih Edit HTML.

Setelah itu maka akan muncul halaman Edit HTML template Blogger, copy semua dan paste pada kode editor kalian.

Contoh Kode Template Blogger

2. Tambahkan Kode CSS Widget WhatsApp


Kode CSS Widget WhatsApp berfungsi untuk mengatur tampilan widgetnya agar terlihat keren.

Dibawah ini kode CSS yang harus kalian tambahkan tepat diatas kode </style> agar lebih mudah mengedit templatenya.

/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;left:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.panduanbloggershow-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;left:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.panduanbloggershow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:left;margin:0 10px 0 0}
.info-avatar:before{content:&#39;\f232&#39;;z-index:1;background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;left:30px}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.panduanblogger-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:&#39;Arial&#39;,sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{color:#555;width:40px;margin:-5px 0 0 5px;font-weight:700;padding:8px;background:#eee;border-radius:10px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .panduanblogger-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;right:15px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}

3. Tambahkan Kode Javascript Widget WhatsApp


Kode Javascript widget WhatsApp berfungsi untuk mengambil nomor WhatsApp dari widget HTML/Javascript dimenu tataletak.

Kemudian untuk mengirim pesan teks ke nomor WhatsApp tersebut secara otomatis.

Berikut ini kode Javascript widget WhatsAppnya.

<script type='text/javascript'>
//<![CDATA[
$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".panduanbloggershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>

Copy kode Javascript diatas kemudian paste tepat diatas kode </body>.

4. Pasang Jquery


Widget WhatsApp ini menggunakan library Jquery, jadi kalian wajib memasang jquery ditemplate agar widget WhatsApp berjalan.

Cara pasang jquery sangat mudah, copy kode dibawah ini.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>

Simpan kode jquery tersebut tepat diatas kode </head>.

Jika pada template kalian sudah terpasang jquery maka jangan pasang lagi, cukup satu saja.

5. Pasang Font Awesome


Font awesome pada widget WhatsApp ini berfungsi untuk menampilkan logo WhatsApp saja.

Dan berikut kode font awesomenya.

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Simpan kode font awesome tersebut diatas kode jquery kalian atau diatas kode </head>.

Kemudian copy lagi kode template kalian yang sudah diedit pada kode editor, dan paste untuk mengganti semua kode template kalian pada halaman Edit HTML.

Lalu save template blog kalian, dan setelah itu buka menu tataletak pada Blogger.

6. Buka Menu Tataletak


Buka menu tataletak dan buat widget HTML/Javascript.

Dan berikut ini kode widget WhatsApp-nya.

<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img class='lazy' data-src='https://2.bp.blogspot.com/-y6xNA_8TpFo/XXWzkdYk0MI/AAAAAAAAA5s/RCzTBJ_FbMwVt5AEZKekwQqiDNqdNQJjgCLcBGAs/s70/supportmale.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/></div>
<div class='info-chat'>
<span class='chat-label'>Pemilik</span>
<span class='chat-nama'>Arif NoerWahidin</span>
</div><span class='my-number'>+62 821-2654-6564</span>
</a>
<!-- Info Contact End -->
<div class='panduanblogger-msg'>Call us to <b>+62 821-2654-6564</b> from <i>0:00hs a 24:00hs</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>Hai, ada yang bisa saya bantu?</span></div>
<div class='panduanblogger-msg'><textarea id='chat-input' placeholder='Write a response' maxlength='120' row='1'></textarea>
<a href='javascript:void;' id='send-it'>Send</a></div></div>
<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='panduanbloggershow-chat' href='javascript:void' title='Show Chat'><i class="fa fa-whatsapp" aria-hidden="true"></i>Tanya Kami</a>

Kemudian edit nomor WhatsApp yang ada pada kode diatas, dan edit juga nama kontak WhatsAppnya.

Setelah itu save dan coba akses blog kalian kembali, cek apakah widget WhatsAppnya muncul atau tidak.

Tutorial atau panduan cara memasang widget WhatsApp Di Blogger keren pada artikel ini saya juga sudah mempraktekkannya, dan memakainya pada template blog ini.

Sekian saja tutorial singkat yang langsung ke pointnya semoga kalian dapat mengerti dan apa yang saya sampaikan dapat bermanfaat aamiin.

Referensi: idblanter

Panduan Code
Panduan Code  Saya menyediakan berbagai tutorial pemrograman, info teknologi, internet marketing, dan lain-lain.
Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

Hai

Klik Kontak Whatsapp Di Bawah Ini Untuk Mulai Mengobrol

Pemilik Arif NoerWahidin
+62 821-2654-6564
Call us to +62 821-2654-6564 from 0:00hs a 24:00hs
Hai, ada yang bisa saya bantu?
×
Tanya Kami