Skip to content Skip to sidebar Skip to footer
Home / Blogging

Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG

Post a Comment
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.

You may like these posts

Post a Comment for "Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG"