Tip dan triks membuat Tombol Chat WhatsApp Melayang di Blogger

Baca Juga:

Bagaimana membuat tombol chat WhatsApp melayang di Blogger atau Blogspot akan dibahas dalam artikel ini. Fungsi dari widget tombol WhatsApp ini yaitu mempermudah pengunjung untuk menghubungi admin blog melalui WhatsApp. Cara ini sangat cocok sekali untuk blog anda yang bertema Jualan Online atau Toko Online.

Sebenarnya ada banyak cara lain yang bisa dilakukan untuk pengunjung agar bisa melakukan komunikasi dengan admin blog atau website, salah satunya adalah dengan menyediakan kolom komentar ataupun Contact Form, sehingga memudahkan pengunjung untuk melakukan interaksi dengan pemilik website.

Namun, apabila anda hanya menyediakan Contact Form saja menurut kami tidaklah begitu efektif, karena jika anda tidak membuka email mungkin tidak akan melihat interaksi yang dilakukan oleh pengunjug web anda. Lalu bagaimana caranya agar lebih efektif?

Caranya yaitu dengan membuat tombol whatsapp pada blog anda, tujuannya adalah mempercepat pengunjung dalam melakukan interaksi dengan anda sebagai pemilik blog / website atau istilah lainnya yaitu bisa live chat. Kenapa harus Whatsapp? karena pada dasarnya pada saat ini Whatsapp paling banyak digunakan sebagai media Chatting di semua kalangan.

Nah, bagi anda yang tertarik mencobanya. Silahkan simak tutorialnya dibawah.

Cara Membuat Tombol WhatsApp Melayang di Blog

1. Pertama, buka Blogger >> Tema >> Edit HTML.
2. Kemudian letakkan kode berikut diatas kode </body>

 <a class='fixed-whatsapp' href='https://wa.me/628973972878?text=Halo%20Kak' rel='nofollow noopener' target='_blank' title='Whatsapp' />

1. Ganti kode 628973972878 dengan nomor WhatsApp anda.
2. Setelah itu, tambahkan kode CSS berikut diatas ]]></b:skin> atau </style>

   /*Tombol Chat WhatsApp*/
   .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. Klik Simpan Tema.

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

.fixed-whatsapp:after{content:"Hallo 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}

Sehinggal hasilnya akan seperti ini:

/*Tombol Chat WhatsApp*/
.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)}
.fixed-whatsapp:after{content:"Hallo 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}
Demikian tutorial Cara Membuat Tombol Chat WhatsApp Melayang di Blogger. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya.

Terima kasih
Instal Revit 2023 full version, Tekla 2023 full version, Geo Studio 2023 full version, AUTOCAD CIVIL 3D 2023 full version,
 SAP 2000 v22, Hecras, Ribasim, Software pemetaan mineral dan tambang 
(pemetaan Geologi 3D) : Leapfrog Geo 5.1, GeoScene3D, MICROMINE 11.0, 
dll
Jasa Cloning software dan Multipe OS Portable support MBR dan GPT Partisi 
Software Cloning and Portable Operating System Windows 11 ver.22H2 (Live OS Windows 11 Portable), 
Hubungi : +6282231036047
Terima Kasih

Penutup

Sekian Penjelasan Singkat Mengenai Tip dan triks membuat Tombol Chat WhatsApp Melayang di Blogger. Semoga Bisa Menambah Pengetahuan Kita Semua.

Apa reaksimu setelah membaca Tip dan triks membuat Tombol Chat WhatsApp Melayang di Blogger