Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG

Info informasi Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG atau artikel tentang Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG

Itu sangat penting bagi seorang yang bergelut didunia julan online hal ini memudahkan pengunjung bisa langsung chat ke nomer telephone. Hal ini memudahkan pmebeli untuk menghubungi kamu.

        Dan pada pstingan kali ini saya akan memberikan tentang cara Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG.

Cara ini bisa digunakan untuk semua blog APM maupun Non APM kamu bisa membuat Whatshap melayang diblog kamu.

Tombol ini dibuat dengan 2 versi yaitu menapilkan icon dengan CSS dan menampilkan dengan HTML dan tentunya keduanya menggunakan icon SVG.

Untuk langkah- langkahnya ikuti tutorial dibawah ini dengan kode berikut :

1. Icon dengan menggunakan CSS

      Dengan hal ini maka kode HTML menjadi lebih simpel karena tidak menggunakan kode HTML Icon SVG.

Simpan kode berikut diatas  </body>

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

anti kode 628xxxxxxxxxx'    dengan no Whastshap kamu dan tambahkan kode CSS di Style diblog kamu.

.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);

}

Maka akan terlihat seperti ini .

2. Icon dengan HTML:
    Dengan ini kamu bisa menggunakan dengan menggunakan CSS lebih kecil

Simpan kode HTML berikut diatas 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 nomer Whastshap kamu dan tamabahkan kode CSS berikut 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;
}
 .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;
}

Dan jika kamu ingin menambahkan kata - kata diatas Whastshap kamu bisa menambahkan kode CSS berikut :

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

Kamu juga bisa mengganti kata- katanya dengan bahasa kamu sendiri dengan mengganti kata berikut "Hai...kakak, chat mimin di sini yah!"

Selamat mencobanya kak semoga postingan kali ini bermanfaat untuk kamu dan bisa digunakan diweb Toko Online kamu.

Demikian artikel tentang Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik