Skip to main content
Pehawe Official

follow us

Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG - Tombol direct chat whatsapp ini biasanya digunakan oleh pengguna blog/website yang berkeinginan untuk mempermudah pengunjung berkomunikasi via chatting whatsapp.

Beraneka ragam cara dari mereka untuk meletakkan tombol chat whatsapp, ada yang berbentuk tombol yang di sematkan setelah artikel yang mereka tulis dan ada juga yang meletakkannya di bagian bawah halaman blog dengan posisi melayang.

Memang benar adanya, jika ada yang mengatakan dengan menyediakan tombol direct chat whatsapp di halaman blog akan cukup bermanfaat. Karena dengan link atau tombol direct chat whatsapp ini, pengunjung blog kita akan dengan sangat mudahnya untuk menghubungi kita via whatsapp.

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

Tombol Direct Chat Whatsapp Dengan icon SVG ini dapat di terapkan di blog AMP dan Non AMP, dan juga tersedia dua versi pilihan yang dapat kalian pilih sesuai dengan keinginan kalian

Bagi kalian yang tertarik untuk memasang Tombol Direct Chat Whatsapp Di Blog Dengan SVG ini di halaman blog kalian, silahkan ikuti tutorial singkatnya berikut :

Cara Memasang Tombol Direct Chat Whatsapp Di Blog

Login Bogger - Klik Template - Edit HTML

Silahkan pilih variasi tombol chat whatsapp berikut sesuai selera

1. Full CSS

Dengan menggunakan Full Css, maka kode HTML akan menjadi lebih simple karena tidak menggunakan kode HTML icon SVG

Simpan kode HTML berikut sebelum kode </body>

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

Ganti kode 628xxxxxxxxxx dengan nomor whatsapp kalian.

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%;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
}

2. Ikon dengan HTML

Dengan hanya menggunakan HTML, maka ukuran CSS nya lebih kecil.

Simpan kode HTML berikut di atas kode </body>


<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' 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>

Ganti kode 628xxxxxxxxxx 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;
  left: 0;
}

.fixed-whatsapp svg {
  vertical-align: middle;
  z-index: 2;
  position: relative;
}

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


.fixed-whatsapp:after {
  content: "Hai...Sob, 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;
}

Yang ditandai silahkan sesuaikan dengan kata-kata yang ingin ditampilkan. Silahkan coba demonya dan hover ikonnya.

Jika ada yang ingin di tanyakan seputar tulisan kali ini, silahkan tinggalkan komentar.

Demikian artikel tentang bagaimana Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG ini semoga bermanfaat dan selamat mencoba.

Jika sobat ingin menjadi donatur silahkan hubungi admin via Whatsapp. Dana hasil dari Donasi akan digunakan untuk memperpanjang domain pehawe.me. Terima Kasih

You Might Also Like :

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar