How to Add a Floating Phone Button on Blogger

How to Add a Floating Phone Button on Blogger

Hi Web Developers! back again with the trickpk, this time the TrickPk admin will share a trick on How to make a floating telephone button on Blogger or blogs . The purpose of this phone button widget is to make it easier for visitors/buyers to contact the blog admin directly by phone. This method is very suitable for your website with a niche  for Online Selling or Online Stores.

Actually there are many methods that can be tried so that visitors can communicate with web or blog admins, one of which is by providing a comment column or Contact Form, making it easier for visitors to interact with web owners.

However, if you only provide a Contact Form, I don't think it's very efficient, because if you don't open the email, you probably won't see the messages that visitors/buyers of your website/blog try. So what's the trick to make it more efficient?

Well, for those of you who are interested in trying it, just go to the topic of discussion.

How to Make a Floating Sidebar Phone Button on a Blog

The following method is used to create a phone button on your blog, the goal is to make it easier for buyers to contact the blog admin.

How to Add a Floating Phone Button on Blogger
  1. First, go to  Blogger  >>  Themes  >>  Edit HTML .

  2. After that, add the following CSS code above  ]]></b:skin> or </style>

  3. /*Button Telephone by TrickPk*/ .fixed-telepon {   position: fixed;   bottom: 30px;   right: 30px;   width: 50px;   height: 50px;   line-height: 50px;   z-index: 9999;   text-align: center; } .fixed-telepon svg {   vertical-align: middle;   z-index: 2;   position: relative; }   a svg{height:50px;     width:50px }
  4. Change code 923xxxxxxxxx with your phone number.

  5. Then put the following code above the code </body>

  6. <a class='fixed-telepon' href='tel:+923xxxxxxxxxx' rel='nofollow noopener' target='_blank'> <svg enable-background="new 0 0 64 64"  version="1.1" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1"><g><circle cx="32" cy="32" fill="#008ae4" r="32"/></g><g opacity="0.2"><g><path d="M28.962,25.343c-0.417-4.794-5.418-7.146-5.63-7.242c-0.199-0.094-0.421-0.122-0.635-0.085    c-5.774,0.958-6.642,4.318-6.677,4.458c-0.048,0.196-0.039,0.399,0.022,0.589c6.886,21.366,21.198,25.327,25.903,26.63    c0.362,0.1,0.661,0.181,0.888,0.255C42.943,49.985,43.056,50,43.169,50c0.155,0,0.31-0.033,0.452-0.098    c0.144-0.065,3.544-1.667,4.375-6.891c0.037-0.227,0-0.463-0.105-0.668c-0.074-0.144-1.853-3.528-6.784-4.724    c-0.345-0.089-0.698,0.002-0.964,0.229c-1.556,1.329-3.705,2.745-4.632,2.891c-6.217-3.04-9.688-8.872-9.819-9.978    c-0.076-0.622,1.348-2.806,2.987-4.582C28.886,25.954,28.991,25.649,28.962,25.343z" fill="#231F20"/></g></g><g><g><path d="M28.962,23.343c-0.417-4.794-5.418-7.146-5.63-7.242c-0.199-0.094-0.421-0.122-0.635-0.085    c-5.774,0.958-6.642,4.318-6.677,4.458c-0.048,0.196-0.039,0.399,0.022,0.589c6.886,21.366,21.198,25.327,25.903,26.63    c0.362,0.1,0.661,0.181,0.888,0.255C42.943,47.985,43.056,48,43.169,48c0.155,0,0.31-0.033,0.452-0.098    c0.144-0.065,3.544-1.667,4.375-6.891c0.037-0.227,0-0.463-0.105-0.668c-0.074-0.144-1.853-3.528-6.784-4.724    c-0.345-0.089-0.698,0.002-0.964,0.229c-1.556,1.329-3.705,2.745-4.632,2.891c-6.217-3.04-9.688-8.872-9.819-9.978    c-0.076-0.622,1.348-2.806,2.987-4.582C28.886,23.954,28.991,23.649,28.962,23.343z" fill="#FFFFFF"/></g></g></g><g id="Layer_2"/></svg> </a>
  7. Click  Save Theme .

Thus the tutorial How to Make a Floating Phone Button on Blogger. Hopefully it can be useful and thank you for visiting.

Related Post

No comments