Tiga Cara Memasang Chat WhatsApp di Blogspot

Ada banyak cara untuk menarik pengunjung Blog, salah satunya adalah memberikan fitur komunikasi cepat dengan chat WhatsApp. Hampir setiap orang kini memiliki akun WhatsApp dan jika pengunjung ingin berinteraksi secara cepat dan mudah kepada pemilik Blog, maka sekarang adalah saat yang tepat untuk memasang chat WhatsApp pada Blog.

Terdapat tiga cara yang dapat diterapkan untuk memasang chat WhatsApp. Cukup pilih salah satu yang sekiranya terbaik terhadap Blog anda. Berikut ini tata cara memasang chat WhatsApp untuk Blog.

1. Memakai Widget Chat Gratis dari WhatsHelp

Langkah:

1. Buka WhatsHelp. Pilih Icon WhatsApp di Pilihan Aplikasi.

Setelah itu, silakan isi nomor WA anda pada kolom yang disediakan.

2. Setting seperlunya seperti ukuran dan mau ditampilkan di versi Desktop atau Mobile maupun Dimana-mana (kedua-duanya). Angka 0 untuk setting ukuran otomatis.

3. Mengatur posisi di Bawah-kiri atau Bawah-kanan dan mengatur teks yang mau ditampilkan.

4. Masukan Email anda dan klik tombol dapatkan kode.

Kode yang didapat akan seperti ini:

5. Masuk ke Blog anda → tema → edit HTML → Tempelkan kode yang sudah didapatkan dari WhatsHelp di atas </body>.

6. Selesai dan lihat blog anda.

2. Kode Manual 1

Langkah:

1. Simpan kode berikut di atas kode </body>.

<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=08xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp' />

Ganti kode 08xxxxxxxxxx dengan nomor WA Anda.

2. Tambahkan kode berikut sebelum </b:skin> atau ]]></b:skin>.

.fixed-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  z-index: 9999;
}

.fixed-whatsapp:before {
  content: "";
  background-repeat: no-repeat;
  background-size: 34px 34px;
  background-position: center center;
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
  background-color: #00C853;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
}

3. Kode Manual 2

Langkah:

1. Simpan kode berikut di atas kode </body>.

<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=08xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp'>
<svg viewBox='0 0 24 24' width='34' height='34'>
<path fill='#ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/>
</svg>
</a>

Ganti kode 08xxxxxxxxxx dengan nomor WA Anda.

2. Tambahkan kode berikut sebelum </b:skin> atau ]]></b:skin>

.fixed-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  z-index: 9999;
  text-align: center;
}

.fixed-whatsapp:before {
  content: "";
  width: 50px;
  height: 50px;
  background-color: #00C853;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
  z-index: 1;
  top: 0;
  left: 0;
}

.fixed-whatsapp svg {
  vertical-align: middle;
  z-index: 2;
  position: relative;
}

Jika ingin menambahkan kata-kata di atasnya, silahkan tambahkan CSS berikut:

.fixed-whatsapp:after {
  content: "Hay kakak, chat mimin di sini yah!";
  width: 100px;
  padding: 5px 10px;
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;
  right: -150px;
  text-align: right;
  color: #555;
  border: 1px solid #dedede;
  background: rgba(255,255,255,.5);
  border-radius: 4px;
  opacity: 0;
  transition:all .4s ease-in-out;
  font-size: 90%;
  line-height: 1.1;
}

.fixed-whatsapp:hover:after {
  opacity: 1;
  right: 0;
}

Itulah ketiga cara memasang chat WhatsApp pada Blog.