CARA MUDAH MEMBUAT TOMBOL WIDGET CHATTING WHATSAPP DI BLOGGER

Ada dua cara yang yang ingin kami bagikan dan sangat mudah dilakukan untuk memasang tombol chat WA di blog. Matode pemasangannya juga sama: Masuk ke pengaturan atau dasbor blog>Tataletak>Tambahkan widget>pilih tambahkan HTML/Javascript.
Pemasangan kode ini memerlukan link awsome untuk menampilkan ikon Whatsapp tanpa link awsome maka link whatsapp tidak bisa menampilkan ikon atau image daripada ikon whatsapp tersebut.

Cara pertama: Masuk ke pengaturan/dasbor blogger pilih Tema>dan pilih editHTML cari kode </head> (untuk mempermudah pencarian tekan ctrl+f pada keyboard) lalu kopi-paste kode dibawah ini dan letakan sebelum atau diatas kode </head> tadi:

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

Cara kedua: sertakan saja langsung link awsome diatas kedalam kotak dialog widget HTM/javascript pada saat pemasangan kodenya, contoh:

1. Layout > Add a Gadget
2. Pilih HTML/JavaScript
3. Judul kosongkan
4. Masukka kode berikut ini:

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

/*WA Live Chat*/

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

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

</style>
<a href="https://api.WhatsApp.com/send?phone=6281274011304&text=Hallo Bang%21%20Saya%20mau%20bertanya...%20" class="WAfloat" target="_blank">
<i class="fa fa-whatsapp WA-float" aria-hidden="true"></i>
</a>

1. Tombol WA float

Gambar tampilannya adalah sebagai berikut:

Tampilan WA float/mengambang di kanan bawah halaman blog

Tombol ini tombol chat WA yang posisinya fix atau mengambang di sebelah kanan bawah halaman blog kita dan ketika di klik akan membawa pembaca atau pengunjung blog langsung ke halaman chat WA jika mereka menggunakan tablet, atau ponsel, cara pemasangannya adalah :

1. Layout/Pengaturan > Add a Gadget
2. Pilih HTML/JavaScript
3. Judul kosongkan
4. Masukkan kode berikut ini:
Setelah halaman widget HTML/Javascript terbuka kopi-paste kode dibawah ini:

Kodenya adalah:

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

/*WA Live Chat*/

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

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

</style>
<a href="https://api.WhatsApp.com/send?phone=6281274011111&text=Hallo Bang%21%20Saya%20mau%20bertanya...%20" class="WAfloat" target="_blank">
<i class="fa fa-whatsapp WA-float" aria-hidden="true"></i>
</a>

Robah nomor telpon (warna merah) dengan nomor sendiri dan kode pesan (warna hijau) dengan kode pesan kita sendiri.
Dan SAVE/SIMPAN

2. Tombol widget biasa

Cara pemasangan kodenya persis dengan cara diatas tetapi pada saat penerapannya tampilannya akan berbeda, lebih sederhana dan minimalis.

Tampilannya sebagai berikut:

Tampilan "hubungi kami" whatsapp pada footer blogger

1. Layout/Pengaturan> Add a Gadget
2. Pilih HTML/JavaScript
3. Judul kosongkan
4. Masukkan kode berikut ini:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
<center>
<a href="https://api.whatsapp.com/send?phone=6285755263332&amp;text=Halo%20Admin.....">Hubungi kami:<i class="fa fa-whatsapp fa-2x" aria-hidden="true"></i></a></center>

Lalu Simpan/SAVE. Ingat, kode link yang disorot warna kuning tidak perlu kita sertakan apabila sebelumnya kita telah menanamkan kode tersebut pada halaman HTML blog di atas kode </head>

Cara kedua ini memiliki variasi, kita bisa menerapkannya sehingga tampilan ikonnya sangat berbeda karena tidak lagi menggunakan ikon awsome akan tetapi menggunakan link image, menurut saya tampilannya memang bagus namun lebih berat dibanding jika kita menggunakan elemen awsome atau "fa fa awsome"

Caranya pemasangannya sama:

1. Layout/Pengaturan > Add a Gadget
2. Pilih HTML/JavaScript
3. Judul kosongkan
4. Masukkan kode berikut ini:

<center>
<a href="https://api.whatsapp.com/send?phone=6281274011111&amp;text=Halo%20Admin....."><img hight="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvQ2eOS4svVd1hTLUe71ssaTVoxUGoXBwfKamp3Ujqf3aeQras0ax2ztdxyJCI2f2O-SBYIitW7ISbOuE6IIb-WhqvjLdpvxmtrIsSIQOR7NSwBd6VTUw1Nl_ETeYrnlD1x0uOc8za1A/s1600/auto-chat-whatsapp-oim-info.png" width="300" /></a></center>

 Link yang kami sorot warna kuning adalah link gambar/image yang menampilkan ikon Whatsapp seperti pada gambar:

Demikianlah cara pemasangan chatting whatsapp pada blogger. Jika ada pertanyaan silahkan chat dengan kami ya :D