Tutorial Cara Memasang Widget WhatsApp di Blog

Cara Memasang Widget WhatsApp di Blog - Sudah banyak yang menggunakan widget WhatsApp untuk keperluan blog mereka, terutama untuk keperluan bisnis.
Tutorial Cara Memasang Widget WhatsApp di Blog

Tutorial Cara Memasang Widget WhatsApp di Blog - Pada kesempatan kali ini, saya ingin memberikan sedikit informasi mengenai plugin WhatsApp di Blogspot atau Blogger. Bagi Kamu yang mempunyai blog di wordpress tentu caranya lebih simple, tinggal pasang plugin dan setting maka tombol WA akan muncul di blog

Sekarang ini, sudah sangat banyak yang menggunakan widget WhatsApp untuk keperluan blog mereka, terutama untuk keperluan bisnis seperti produk dan jasa. Ada banyak alasan mengapa WhatsApp tersebut penting untuk digunakan, salah satunya adalah kemudahan dalam melakukan interaksi antara pembaca dan penulis.

Coba bayangkan apabila hanya menggunakan layanan email dan komentar untuk berkomunikasi. Bukankah itu lebih sulit?

Baca Juga: Tutorial Cara Memasang Lazy Load di Blogspot atau Blogger

Lalu, bagaimana cara pemasangan widget WA tersebut?

Cara Memasang Widget WhatsApp di Blog

  • Buka BLOGGER
  • Pilih TEMA
  • Pilih EDIT HTML
  • Tempel di atas </body>:
  • <a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp' />

    Ganti kode yang telah ditandai dengan nomor WhatsApp Anda.

  • Tempel di atas ]]></b:skin>:
  • /* Widget WhatsApp by HanaFash */
    .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, Hubungi kami di sini";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}

    Ganti kode yang telah ditandai dengan pesan yang ingin Anda tampilkan.

  • Pilih SIMPAN
  • Selesai.

Ubah gaya tampilan sesuai dengan keinginan Anda.

Akhir Kata

Sebagai seorang blogger, sudah sepatutnya kita memberikan segala macam kemudahan kepada setiap pelanggan. Dengan kemudahan tersebut, pengunjung tidak akan sungkan untuk berkunjung lagi kedepannya.

Sebenarnya banyak tools yang bisa Anda gunakan untuk pemasangan WA tersebut. Salah satunya adalah WA Blaster. Namun untuk kali ini, saya hanya memberikan tutorial dengan menggunakan skrip CSS biasa.

Baca Juga: Panduan Menulis Artikel Valid AMP di Blog

Demikian artikel tentang Tutorial Cara Memasang Widget WhatsApp di Blog ini, semoga bermanfaat.