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.
First, go to Blogger >> Themes >> Edit HTML .
After that, add the following CSS code above ]]></b:skin> or </style>
Change code 923xxxxxxxxx with your phone number.
Then put the following code above the code </body>
Click Save Theme .
/*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 }
<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>
Thus the tutorial How to Make a Floating Phone Button on Blogger. Hopefully it can be useful and thank you for visiting.