✔ Cara Menciptakan Tombol Live Chat Whatsapp Melayang Di Blogger

Membuat tombol live Chat WhatsApp di blogger merupakan salah satu bentuk profesional kerja yang dapat anda tunjukan dalam membangun komunikasi yang baik antara admin blogger dengan pengunjung blog anda sendiri. Terlebih kalau 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 dapat 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 kalau blog yang anda buat yakni toko online.

Cara Memasang Tombol Chat WhatsApp di Blogger

Pada kesempatan kali ini akan saya berikan 2 cara gampang menciptakan Tombol Live Chat WhatsApp yang dapat melayang di Blogger. Perlu di ingat Dari kedua cara di bawah ini pilihlah salah satu yang berdasarkan anda gampang untuk di praktekkan dalam menciptakan tombol chat whastapp di blog biar 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 kemudian pilih tema dan klik pada edit HTML. Setelah itu tambahkan isyarat di bawah ini sempurna di atas isyarat </body>

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

Ganti isyarat 628xxxxxxxxxx yang saya warnai tanda merah dengan nomor Hp yang telah anda daftarkan untuk WhatsApp biar 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 memakai widget live chat gratis dari WhatsHelp

WhatsHelp yakni sebuah website yang menyediakan layanan perpesanan yang gampang dan simple untuk di gunakan. Dengan memanfaatkan WhatsHelp anda dapat menciptakan bot chat yang dapat 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 menyerupai facebook, telegram dan masih banyak lagi. Namun disini kita hanya akan menciptakan tombol live chat whatsapp yang melayang di blog, maka anda hanya perlu menentukan menciptakan tombol live chat whatsappnya saja.

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

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

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

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

Langsung saja melangkah ke bab "Add the code to your website" pada nomor 3 untuk mengisi alamat email kemudian tekan "Get Button Code"  biar isyarat live chat whatsapp dapat pribadi di generate.

Langkah terakhir copy paste isyarat 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 dapat mengklik sendiri tombol live chat yang ada di blog anda untuk sekedar iseng mengirimkan pesan. 

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

Nah itulah cara menciptakan tombol chat whatsap melayang di blog, kalau anda menemukan hambatan mengikuti tutorial yang saya bagikan di atas, anda dapat menghubungi saya via live chat whatsapp yang saya pasang juga di blog ini atau dengan menunjukkan komentar pribadi di postingan ini. Dan jangan lupa untuk membagikan postingan ini di akun media umum anda kalau berdasarkan anda artikel cara buat tombol chat whatsapp di blogger bermanfaat untuk anda dan orang lain.
Sumber http://www.masigun.com

Share this post

Berlangganan update artikel terbaru via email: