How to Make Whatsapp Direct Chat Button on Blog with Html And CSS


How to Make Whatsapp Direct Chat Button on Blog with SVG

This WhatsApp direct chat button usually used by users of blogs / websites who wish to make it easier for visitors to communicate via WhatsApp chat.
A variety of ways from them to put the.

whatsapp chat button, there are shaped buttons that are embedded after the articles they write and some placed at the bottom of the blog page with floating position.
if someone says by providing a direct WhatsApp chat button on the blog page it will be quite useful. Because with this direct link or whatsapp chat button, visitors to our blog will find it very easy to contact us via whatsapp.
Whatsapp Direct Chat button that will be used this time uses the svg icon with additional css to set the position of the whatsapp icon later.
Whatsapp Direct Chat Button With this SVG icon, it can be applied on AMP and Non AMP blogs, and there are also two optional versions that you can choose according to your wishes.
For those of you who are interested in installing Whatsapp Direct Chat Button on Blog With this SVG on your blog page, please follow the short tutorial below:

How to Install the Whatsapp Direct Chat Button on the Blog

Login Bogger - Click Template - Edit HTML

Please choose the following WhatsApp chat button variations according to taste

1. Full CSS

By using Full Css, the HTML code will be simpler because it does not use the HTML icon SVG
Save the following HTML code before the code </body> selection
<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp' />

Replace this 628xxxxxxxxxx with your whatsapp number.
Then add the following CSS before </style> selection.
.fixed-whatsapp {

  position: fixed;

  bottom: 20px;

  right: 20px;

  width: 50px;

  height: 50px;

  z-index: 9999;

}

Then add this css on your </head>



.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. Icons with HTML

By only using HTML, the CSS size is smaller.
Save the following HTML code above the code </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>

Replace this number 628xxxxxxxxxx with your phone number
Then add this is CSS On your </style> selection on your template


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

}


If you want to add a message or words on it, please add the following CSS:

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

}


Marked please adjust the words you want to display. Please try the demo and hover the icon.
If there is anything you want to ask about this post, please leave a comment on the comment section.
Thus the article about how to make Whatsapp Direct Chat Button on Blog with SVG, hopefully Use.
cssmoz

Cssmoz for learning web design and development, get latest blogger tips, Facebook tips, learn work prayers for beginners also get HTML templates, Blogger templates, Wordpress themes and more!

1 Comments

  1. If you're trying to lose kilograms then you absolutely need to jump on this totally brand new custom keto meal plan diet.

    To produce this service, licensed nutritionists, fitness couches, and chefs have united to develop keto meal plans that are powerful, painless, price-efficient, and fun.

    Since their grand opening in early 2019, hundreds of clients have already transformed their figure and well-being with the benefits a smart keto meal plan diet can offer.

    Speaking of benefits: clicking this link, you'll discover 8 scientifically-tested ones offered by the keto meal plan diet.

    ReplyDelete
Post a Comment
Previous Post Next Post