2 Cara Membuat Tombol Whatsapp di Blogger

Cara Membuat Tombol WhatsApp di Blogger - Tombol chat langsung WhatsApp biasanya digunakan oleh pengguna blog / website yang ingin memudahkan pengunjung untuk berkomunikasi melalui chat WhatsApp. Apalagi jika anda memiliki blog seputar bisnis yang selalu harus bisa berkomunikasi dengan klien yang ingin tahu lebih banyak tentang produk anda.

Salah satu contoh tombol support whatsapp chat di blogger

Beragam cara dari mereka dengan memasang atau membuat support WhatsApp Chat di Blogger. Ada yang berbentuk tombol yang disematkan setelah artikel yang mereka tulis dan ada pula yang diletakkan di bagian bawah halaman blog dengan posisi tombol Whatsapp melayang.

Baca juga: Cara Tambahkan Tombol Social Bookmarking ke Blog

Memang benar, jika ada yang mengatakan bahwa memberikan tombol chat WhatsApp langsung di halaman blog akan cukup berguna. Karena dengan adanya link atau tombol chat langsung whatsapp ini, pengunjung blog kita akan sangat mudah untuk menghubungi kita melalui whatsapp.

Tombol Whatsapp Direct Chat yang akan digunakan kali ini menggunakan icon svg dengan tambahan css untuk mengatur posisi icon Whatsapp nantinya.

Tombol Obrolan Langsung Whatsapp Dengan ikon SVG ini dapat diterapkan pada blog AMP dan Non AMP, dan juga terdapat dua versi opsional yang dapat Anda pilih sesuai dengan keinginan Anda.

Bagi Anda yang tertarik memasang Tombol Obrolan Langsung Whatsapp di Blog Dengan SVG ini di halaman blog Anda, silakan ikuti tutorial singkat di bawah ini:

Cara Membuat Tombol Whatsapp di Blogger

Login ke Blogger - Klik Template - Edit HTML

Silakan pilih variasi tombol obrolan whatsapp berikut ini sesuai selera anda

1. Full CSS

Dengan menggunakan Full Css maka kode HTML akan lebih sederhana karena tidak menggunakan icon kode HTML SVG.

Simpan kode HTML berikut sebelum kode </body>

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

Ubah kode 91xxxxxxxxxx Dengan nomor whatsapp Anda.

Kemudian tambahkan CSS berikut sebelum </style>. 

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

 2. Ikon dengan HTML

Dengan hanya menggunakan HTML maka ukuran CSS menjadi lebih kecil.

Simpan kode HTML berikut di atas kode tersebut </body>

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

<svg viewBox='0 0 24 24' width='34' height='34'>

<path fill='#ffffff' 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'/></svg></a>

Ubah kode 91xxxxxxxxxx dengan nomor WA Anda.

Tambahkan CSS berikut sebelum kode </style> 

.fixed-whatsapp {

  position: fixed;bottom: 20px;right: 20px;width: 50px;height: 50px;line-height: 50px;z-index: 9999;text-align: center;}.fixed-whatsapp:before {content: "";width: 50px;height: 50px;background-color: #00C853;position: absolute;border-radius: 100%;box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);z-index: 1;top: 0;

 Jika Anda ingin menambahkan pesan atau kata-kata di dalamnya, silakan tambahkan CSS berikut ini:

 .fixed-whatsapp: after {

 content: ' Hai ... Teman, chat kami disini!";

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;

Yang berwarna biru silahkan sesuaikan dengan kata yang ingin anda tampilkan. Jika ada yang ingin Anda tanyakan tentang postingan ini, silakan tinggalkan komentar.

Demikian artikel tentang Cara Membuat Tombol Whatsapp di Blogger dengan SVG semoga bermanfaat dan selamat mencoba. 

Orang juga mencari:

• cara membuat tombol whatsapp melayang di blogger
• membuat tombol whatsapp di website
• cara pasang link wa di blogspot
• cara membuat tombol melayang di blog
• cara membuat tombol telepon melayang
• cara membuat support whatsapp chat di blogger
• whatsapp button for website