Membuat Tombol Chat Whatsapp Melayang Di Blog Dengan Svg

Tombol ini aku buat dengan 2 versi yakni menampilkan ikon dengan CSS dan menampilkan ikon dengan HTML. Tentu saja keduanya memakai ikon SVG.

1. Ikon dengan CSS

Dengan ini maka arahan HTML menjadi lebih mudah sebab tidak memakai arahan HTML ikon SVG.

Simpan arahan HTML berikut di atas arahan </body>

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

Ganti arahan 628xxxxxxxxxx dengan nomor WA Anda.

Tambahkan CSS berikut di style blog Anda.

 .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 ini maka CSS nya lebih kecil.

Simpan arahan HTML berikut di atas arahan </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 arahan 628xxxxxxxxxx dengan nomor WA Anda.

Tambahkan CSS berikut di style blog Anda.

 .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 kata-kata di atasnya, silahkan tambahkan 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;
 }

Yang ditandai silahkan sesuaikan dengan kata-kata Anda. Silahkan coba demonya dan hover ikonnya.

Semoga bermanfaat.

Share this post