Sticky Chat Button (WhatsApp, Telegram, Messenger, SMS Dan E-mail)

Sticky Chat Button merupakan widget atau tombol chat sosial media seperti whatsapp, telegram, messenger, sms dan chat via e-mail yang di rancang khusus untuk website dan blog. Desain yang simple dan mobile friendly menjadikan widget chat buttons ini sangat cocok untuk diterapkan di web anda.

Sticky Chat Button For Web / Blog

Popular Chat Buttons

  1. WhatsApp,
  2. Telegram,
  3. Facebook Messenger,
  4. SMS (Short Message Service), dan
  5. E-mail Message.
[ads id="ads1"] Baiklah, saya tidak ingin berlama-lama untuk menjelaskan ini karena saya akan langsung mengajak anda ke tutorial membuat/memasang widget chat button (tombol chat sosial media) di blog dengan gaya sticky (fixed).

Memasang Tombol Chat Sosial Media Di Blog

  1. Pilih salah satu social chat button,
  2. Install kode html chat button di atas kode penutup body (</body>),
  3. Tambahkan kode css sticky chat button diantara tag <head> dan </head>,
  4. Untuk platfom blogger install/pasang kode css sticky chat button di atas kode ]]></b:skin> tanpa tag <style>,
  5. Kemudian ganti URL dengan short link chat sosial media anda
  6. Terakhir klik Save untuk menyelesaikan.
Catatan: Perhatikan ilustrasi/contoh pemasangan kode html dan kode css sticky chat button pada cuplikan kode di bawah ini agar tidak salah.

Contoh Memasang Widget Sticky Chat Button

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.sticky-chat-button{

  position: fixed;

  background-color: #3367d6;

  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;

}

</style>

</head>

<body>

...

<div class="sticky-chat-button">

<!-- social media chat button  start -->

 <a href="URL" title="Chat Button">

  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512">

   <path fill="#fff" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"/>

  </svg>Chat Me!</a>

<!-- social media chat button end -->

</div>

</body>

</html>

Kode HTML Chat Button

<div class="sticky-chat-button">

<!-- default chat button  start -->

 <a class="default-chat-button" href="URL" title="Chat Button">

  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 512 512">

   <path fill="#fff" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"/>

  </svg></a>

<!-- default chat button end -->

</div>

CSS Sticky Chat Button

<style>

.sticky-chat-button{

  position: fixed;

  background-color: #3367d6; //replace this color

  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;

}

</style>
Customize: Ganti warna background tombol chat (background-color: #3367d6;) dengan id color yang yang sesuai dengan sosial chat button yang anda pilih, misalnya: whatsapp color #25d366, telegram color #0088cc, messenger color #006aff, sms color #3367d6 dan e-mail color #fc4f08 dan,

Khusus untuk telegram chat button ganti css padding: 8px menjadi 6px agar icon telegram lebih center.

Gunakan salah satu kode html social chat button di bawah ini untuk membuat tombol chat di blog anda.

WhatsApp Chat Button (HTML)

<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>

Telegram Chat Button (HTML)

<div class="sticky-chat-button">

<!-- telegram chat button  start -->

 <a class="telegram-chat-button" href="https://t.me/username" title="Chat Button">

  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 32 32">

   <path fill="#fff" d="M29.919 6.163l-4.225 19.925c-0.319 1.406-1.15 1.756-2.331 1.094l-6.438-4.744-3.106 2.988c-0.344 0.344-0.631 0.631-1.294 0.631l0.463-6.556 11.931-10.781c0.519-0.462-0.113-0.719-0.806-0.256l-14.75 9.288-6.35-1.988c-1.381-0.431-1.406-1.381 0.288-2.044l24.837-9.569c1.15-0.431 2.156 0.256 1.781 2.013z"/>

  </svg></a>

<!-- telegram chat button end -->

</div>

Messenger Chat Button (HTML)

<div class="sticky-chat-button">

<!-- messenger chat button  start -->

 <a class="messenger-chat-button" href="https://m.me/username" title="Chat Button">

  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 32 32">

   <path fill="#fff" d="M0 15.521c0-8.922 6.984-15.521 16-15.521s16 6.599 16 15.521c0 8.917-6.984 15.521-16 15.521-1.615 0-3.172-0.214-4.625-0.615-0.286-0.078-0.589-0.052-0.854 0.068l-3.188 1.401c-0.833 0.37-1.776-0.224-1.802-1.135l-0.094-2.854c-0.010-0.349-0.167-0.672-0.422-0.906-3.245-2.927-5.073-7.109-5.016-11.479zM11.094 12.599l-4.693 7.469c-0.469 0.703 0.427 1.521 1.094 1l5.052-3.828c0.349-0.266 0.802-0.266 1.161 0l3.729 2.802c1.125 0.839 2.724 0.531 3.469-0.641l4.693-7.469c0.469-0.703-0.427-1.505-1.094-1l-5.052 3.828c-0.333 0.266-0.802 0.266-1.146 0l-3.734-2.802c-1.125-0.849-2.729-0.552-3.479 0.641z"/>

  </svg></a>

<!-- messenger chat button end -->

</div>

SMS Chat Button (HTML)

<div class="sticky-chat-button">

<!-- sms chat button  start -->

 <a class="sms-chat-button" href="sms:0812xxxxxxxx" title="Chat Button">

  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 512 512">

   <path fill="#fff" d="M464,48H48A16,16,0,0,0,32,64V352a16,16,0,0,0,16,16h80V480h8L248,368H464a16,16,0,0,0,16-16V64A16,16,0,0,0,464,48ZM184,272H144V232h40Zm96,0H240V232h40Zm96,0H336V232h40Z"/>

  </svg></a>

<!-- sms chat button end -->

</div>

E-mail Message (HTML)

<div class="sticky-chat-button">

<!-- email chat button  start -->

 <a class="email-chat-button" href="mailto:yourmail@gmail.com" title="Chat Button">

  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">

   <path fill="#fff" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>

  </svg></a>

<!-- email chat button end -->

</div>
Nah, demikian saja tutorial membuat atau memasang tombol chat di blog, saya harap widget sticky chat button ini dapat membantu anda terhubung dengan audiens yang lebih banyak. Selemat mencoba dan sampai jumpa kembali di tutorial-tuorial menarik selanjutnya seputar blogging dan web design. [Lihat Demo]

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mengatasi Render Blocking Resources Dari Template Blogger

Gambar
Cara Mengatasi Render-blocking resources -  Sedikitnya ada dua jenis resources pada template blogger yang menyebabkan bloking first paint pada halaman blog. Yang pertama resources yang berasal dari platform blogger (resources default) yang biasa kita sebut dengan bundle css blogger dan resources pihak ketiga (3rd party) seperti bundle css fontawesome dan library javascript. Kedua jenis resources (bundle css/js) tersebut sebenarnya bukan hal buruk untuk situs blog, kita hanya perlu memuatnya secara tidak sinkron (asynchron) jika memungkinkan, Dan khusus untuk bundle css/js bawaan blogger langkah terbaik saat ini untuk mengatasinya adalah adalah dengan menonaktifka-nya. Karena sangat tidak mungkin untuk memodifikasi kode tersebut. Dampak Negatif Render-Blocking Resources [ads id="ads1"] Yang paling nyata dampak negatif render-blocking resources adalah (bloking first paint) yaitu ketika browser memuat halaman blog yang pertama kali terlihat adalah layar putih, di butuhkan waktu
Baca selengkapnya

Cara Mengatasi URL Yang Dikecualikan (Discovered-Currently Not Indexed Status)

Gambar
Tahukah kamu apa itu " Discovered currently not indexed " dengan status " Excluded "? Discovered currently not indexed maksudnya adalah halaman (url) sudah ditemukan oleh google tetapi belum di-crawl, sedangkan status excluded adalah status url yang masuk dalam ketegori pengecualian atau di kecualikan. Biasanya halaman ( url ) yang dikecualikan juga tidak diindeks oleh google karena menurut google halaman (url) merupakan duplikat dari halaman yang diindeks, atau diblokir dari pengindeksan oleh beberapa mekanisme di situs web itu sendiri. Jika tag canonical url di terapkan dengan benar beberapa url atau halaman di situs web akan dikecualikan oleh crawler google, biasanya halaman yang dikecualikan merupakan halaman (url) yang memang tidak penting untuk diindeks seperi url ?m=1, ?m=0 dan /search. Pengecualian pada yang url seperti itu baik untuk situs web, dengan begitu url (halaman) duplikat akan terjaring kedalam keranjang pengecualian di search console. [ads id=&
Baca selengkapnya

Cara Mendaftarkan Blog Ke Google Adsense (Panduan Terupdate)

Gambar
Google adsense menjadi terget utama kebanyakan blogger di dunia, pasalnya google adsense memberikan penghasilan kepada konten kreator melalui monetisasi konten blog dengan iklan adsense. Oleh karena itu bagi kamu yang baru saja memulai blogging khususnya yang ngeblog di platform blogger saya akan menunjukkan cara mendaftarkan blog anda ke google adsense agar dapat dimonetisasi dengan iklan adsense. Tapi sebelumnya harap perhatikan dan terapkan beberapa poin di bawah ini agar blog anda dapat dimonetisasi dengan iklan adsense. Syarat Agar Blog Diterima Adsense Untuk Monetisasi Daftarkan blog anda ke google adsense jika sudah rampung. Pastikan konten blog tidak berisi konten dewasa dan perjudian. Buat navigasi yang relevan dengan konten dan niche blog. Pastikan blog memiliki trafik organik. [ads id="ads1"] Jika ke empat poin di atas yang menjadi syarat kelayakan situs (blog) untuk dimonetisasi dengan iklan adsense sudah dipenuhi oleh blog anda maka blog sudah siap untuk didaftar
Baca selengkapnya