Skip to main content

Cara membuat Tombol Live Chat WhatsApp melayang di Blogger

cara buat tombol whatsapp yang melayang di blog

Membuat tombol live Chat WhatsApp di blogger merupakan salah satu bentuk profesional kerja yang bisa anda tunjukan dalam membangun komunikasi yang baik antara admin blogger dengan pengunjung blog anda sendiri. Terlebih jika blog yang anda buat bertema konsultasi atau toko online, yang memang harus memudahkan pengunjung untuk menghubungi anda. Salah satunya yaitu dengan menyediakan tombol live chat WhatsApp melayang di blog yang sangat memudahkan pengunjung menghubungi anda via WhatsApp.

Dengan fitur tombol live chat WhatsApp yang anda pasang di blog/website, maka anda bisa dengan cepat merespon pesan masuk yang di kirim oleh pengunjung blog anda. Di samping itu Dengan adanya pelayanan komunikasi yang baik, maka tidak menutup kemungkinan pengunjung blog anda akan merasa puas dan merekomendasikan ke orang lain untuk mengunjungi blog anda. Tentu saja hal ini sangat menguntungkan bagi anda sendiri, terlebih jika blog yang anda buat adalah toko online.

Cara Memasang Tombol Chat WhatsApp di Blogger


Pada kesempatan kali ini akan saya berikan 2 cara mudah membuat Tombol Live Chat WhatsApp yang bisa melayang di Blogger. Perlu di ingat Dari kedua cara di bawah ini pilihlah salah satu yang menurut anda mudah untuk di praktekkan dalam membuat tombol chat whastapp di blog agar icon tombol chat whatsapp tidak terjadi tumpang tindih.

Baca juga : Cara buat tombol buka tutup komentar di blog

Membuat tombol chat WhatsApp melayang di Blog dengan SVG


Seperti biasanya dalam mengubah data struktur template, anda perlu masuk ke akun blogger anda lalu pilih tema dan klik pada edit HTML. Setelah itu tambahkan kode di bawah ini tepat di atas kode </body>

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


Ganti kode 628xxxxxxxxxx yang saya warnai tanda merah dengan nomor Hp yang telah anda daftarkan untuk WhatsApp agar tombol live chat whatsapp di blog bekerja dengan baik. Setelah itu tambahkan css di bawah ini di dalam style blog Anda.

.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);
}


Langkah terakhir klik simpan perubahan dan coba buka salah satu postingan anda, maka akan muncul tombol chat whatsaap di sebelah kanan bawah halaman blog anda.

Membuat tombol chat WhatsApp di blog menggunakan widget live chat gratis dari WhatsHelp


WhatsHelp adalah sebuah website yang menyediakan layanan perpesanan yang mudah dan simple untuk di gunakan. Dengan memanfaatkan WhatsHelp anda bisa membuat bot chat yang bisa anda terapkan di website, salah satunya yaitu membut tombol live chat whatsapp di blog.

Selain tombol live chat whatsapp, pada situs whatshelp juga menyedikan layanan pesan lainnya seperti facebook, telegram dan masih banyak lagi. Namun disini kita hanya akan membuat tombol live chat whatsapp yang melayang di blog, maka anda hanya perlu memilih membuat tombol live chat whatsappnya saja.

Untuk menikmati semua fitur editor whatshelp anda perlu membayar $2.49/bulan. Tapi menurut saya versi gratisan pun hasilnya cukup maksimal kalau hanya untuk membuat tombol live chat whatsapp di blog.

Langkah pertama silahkan anda masuk ke halaman WhatsHelp Widget dan gulir ke bawah ke bagian "Get a Free Button in Three Simple Steps"

Pilih tombol whatsapp saja pada "Choose messaging apps" yang nomor satu, karena disini kita hanya akan membuat tombol live chat whatsapp yang nantinya akan kita terapkan di blog, lalu isi kolom di bawahnya dengan nomor whatsapp anda.



Selanjutnya pada "Customize your button" anda hanya perlu memilih posisi di mana tombol live chat whatsapp akan di pasang Left atau Right.



Langsung saja melangkah ke bagian "Add the code to your website" pada nomor 3 untuk mengisi alamat email lalu tekan "Get Button Code"  agar kode live chat whatsapp bisa langsung di generate.



Langkah terakhir copy paste kode hasil generate live chat whatsapp di atas pada template blogger anda sebelum tags </body>.

Untuk mencoba apakah tombol live chat whatsap blog bekerja dengan benar anda bisa mengklik sendiri tombol live chat yang ada di blog anda untuk sekedar iseng mengirimkan pesan. 

Satu kelebihan yang saya rasakan dari cara membuat tombol chat whatsapp di blog pada tutorial nomor 1 anda bisa mengatur sendiri posisi icon tombol chat whatsapp akan di letakan dengan mengubah pada kode CSS nya. Namun pada cara yang nomor 2 anda hanya bisa memilih menampilkan di sebelah bawah kiri atau kanan halaman blog anda untuk di tempatkan icon tombol chat whatsapp. 

Nah itulah cara membuat tombol chat whatsap melayang di blog, jika anda menemukan kendala mengikuti tutorial yang saya bagikan di atas, anda bisa menghubungi saya via live chat whatsapp yang saya pasang juga di blog ini atau dengan memberikan komentar langsung di postingan ini. Dan jangan lupa untuk membagikan postingan ini di akun media sosial anda jika menurut anda artikel cara buat tombol chat whatsapp di blogger bermanfaat untuk anda dan orang lain.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar