Cara Membuat Live Chat Whatsapp di Blog

Oleh Majid Abana Segaf November 09, 2017 5 komentar

Fairus Majid akan membagikan tips Cara Membuat Live Chat Whatsapp di Blog. Tips ini adalah menaruh tombol melayang seperti Customer Support pada sisi kanan atau kiri blog.

Seperti contoh pada gambar diatas letak posisi Live Chat Whatsapp yang Fairus Majid kutip dalam Whatsapp Floating Button milik dari Kevin Castro di Codepen.io.
Bagi yang ingin mencobanya bisa langsung kita ikuti dibawah ini:

Cara Membuat Live Chat Whatsapp di Blog

Pertama buka Blogger > Tema > Klik tombol Edit HTML > dan tambahkan kode di bawah ini tepat diatas kode <body> . Apabila sudah ada di template sobat, silahkan di lewati.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Lalu tambahkan kode di bawah ini tepat di atas ]]></b:skin> atau </style> dalam template sobat.

<style type="text/css">

/*WA Live Chat*/

.WAfloat{
 position:fixed;
 width:60px;
 height:60px;
 bottom:40px;
 right:40px;
 background-color:#25d366;
 color:#FFF;
 border-radius:50px;
 text-align:center;
  font-size:30px;
 box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.WA-float{
 margin-top:16px;
}

</style>

Kemudian tambahkan kode HTML ini di dalam Template atau Tata Letak dalam blog.

<a href="https://api.whatsapp.com/send?phone=51955081075&text=Hola%21%20Quisiera%20m%C3%A1s%20informaci%C3%B3n%20sobre%20Varela%202." class="WAfloat" target="_blank">
<i class="fa fa-whatsapp WA-float"></i>
</a>

Ganti :
phone=NomorKamu
text=Kalimat%20Kamu%20Sendiri

%20 adalah kode untuk SPASI

Cek hasilnya.

Demo

Mudahkan? coba aja :D

Thanks to:
Kevin Castro