How To Add Whatsapp And Sms Button in Blogger

Blogger Online WhatSapp and SMS Button - In this post I will share tips about WhatSapp and SMS buttons to buy goods through direct communication with blog visitors, bloggers or online store sellers online. Bloggers want to constantly interact with online store customers in order to be able to sell more. Of course this also creates trust for our customers. 

Thanks to the buttons we share, consumers will be able to communicate directly with the order entry via buttons, without the need for an administrator or vendor contact number.

Blog Online Adding WhatSapp and SMS Button

To add buttons to your blog site, log in to your Blogger account and open the template codes page of your blog by following the instructions on the Theme> Edit HTML page in your blog's control panel and follow the steps below. 

1- To insert the following CSS </head>codes, find the code with CTRL + F and add the CSS </head>codes on a line of code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.mobile-btn{padding:10px 16px;margin:0;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}.mobile-btn:active:focus,.mobile-btn:focus{outline:0}.mobile-btn:focus,.mobile-btn:hover{color:#333;text-decoration:none;outline:0}.mobile-btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.mobile-btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.mobile-btn-purple{background:#558B2F;border-bottom:2px solid #33691E;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#fff;}.mobile-btn-purple:active,.mobile-btn-purple:focus,.mobile-btn-purple:hover{background:#689F38;color:#fff}#mobile_shop{margin-top:30px;background:#fff3e0;padding:15px 15px 5px;border-radius:3px!important;}#mobileshop:target{display:block;margin-top:-80px;height:80px;visibility:hidden}#mobile_shop h4{font-size:16px;font-weight:600;color:#444;margin:0;line-height:1}#mobile_shop p{font-size:14px;font-weight:400;display:block;margin:10px 0;line-height:1.2}#mobile_shop a{margin-bottom:10px;margin-right:10px}
.mobile-btn i{font-size:24px;vertical-align:text-bottom;}
/*]]>*/
</style>
</b:if>

Save the template after adding CSS code. 

2- You can use the following in your HTML blog posts. To use it in your blog posts, add the following codes to the post creation HTML page.

<div id='mobile_shop'>
<span id='mobileshop'/>
<h4>Başlık</h4>
<p>Açıklama</p>
<a class='mobile-btn mobile-btn-purple mobile-btn-lg' expr:href='&quot;https://api.whatsapp.com/send?phone=053000000xx&amp;text=Saya%20pesan%20&quot; + data:post.title'><i class="fa fa-whatsapp"></i> Whatsapp</a>
<a class='mobile-btn mobile-btn-purple mobile-btn-lg' expr:href='&quot;sms://+053000000xx?body=Saya%20pesan%20&quot; + data:post.title'><i class="fa fa-mobile"></i> SMS</a>
</div>

Add your phone number at the address indicated in the above HTML code.

Preview

In this article we shared information about bloggers, WhatSapp and SMS buttons that consumers could use to communicate online. You can leave comments for your questions and comments about the post.