Cara Membuat Tombol Chat WhatsApp Di Blog

Tutorial ini merupakan refensi dari cordialblogger.com yang menyediakan berbagai widget blogger dan salah satunya adalah widget sosial media chat button. Tetapi disini saya hanya menjelaskan cara membuat tombol chat whatsapp di blog dan khusus membahas tentang tombol chat whatsapp saja, berbeda dengan sumber referensi yang membahas berbagai tombol chat sosial media yang bisa diterapkan di blog.

Tanpa membuang-buang waktu mari kita simak selengkapnya cara membuat tombol chat whatsapp di blog.

Kelebihan Widget Chat WhatsApp

1. Tanpa plugin pihak ketiga
2. Responsive
3. Mobile Friendly, dan
4. Fast Loading (Ringan)

Kelebihan widget tombol chat whatsapp di atas dapat dibuktikan melalui tool pengujian google diantaranya Mobile-Friendly Test Tool dan PageSpeed Insight, silahkan buktikan kebenaran-nya.

Material Yang Digunakan

1. Kode HTML Tombol Chat WhatsApp
2. Kode CSS Tombol Chat WhatsApp
3. Short Link WhatsApp
4. WhatsApp SVG Icon

Kode HTML Tombol Chat WhatsApp

<div class="sticky-chat-button">
<!-- whatsapp chat button  start -->
 <a class="whatsapp-chat-button" href="https://wa.me/62812xxxxxxxx" title="Chat Button">
  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 448 512">
   <path fill="#fff" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/>
  </svg></a>
<!-- whatsapp chat button end -->
</div>

Kode CSS Tombol Chat WhatsApp

.sticky-chat-button {
  position: fixed;
  background-color: #0088cc;
  border-radius: 40px;
  bottom: 80px;
  right: 15px;
  height: 40px;
  width: 40px;
  overflow: hidden;
}
.sticky-chat-button a {
  display: inline-block;
  position: relative;
  text-align: center
  height: 25px;
  width: 25px;
  padding: 8px;
}

Catatan: Short link dan ikon svg sudah di kombinasikan pada kode html whatsapp chat button di atas, jadi selanjutnya kamu hanya perlu mengikuti langkah-langkah memasang tombol chat whatsapp di blog, ikuti panduan lengkapnya dibawah ini.

Memasang Tombol Chat WhatsApp Di Blog

1. Install kode html tombol chat whatsapp di atas kode penutup body ( </body> )
2. Kemudian install kode css tombol chat whatsapp di atas kode ]]></b:skin>
3. Ganti nomor whatsapp dengan nomor whatsapp anda
4. Terakhir klik Save Template untuk menyelesaikan.

Kenapa tombol chat whatsapp ini sangat ringan (fast loading)?, karena material yang digunakan untuk membuat tombol chat whatsapp hanya berupa kode html, css, url (short link whatsapp) dan ikon svg saja. Saya fikir sampai disini saja artikel tentang tutorial membuat tombol chat whatsapp di blog, selamat mencoba dan selamat menggunakan tombol chat whatsapp by cordialblogger.com ini. [Lihat Demo]