Blogger, why use a call button on the website? Here are some reasons:
Direct Contact:
A call button allows visitors to contact the blogger directly via phone, facilitating real-time communication. This can be particularly useful for potential clients, customers, or readers who have specific inquiries or need immediate assistance.
Personal Connection:
Hearing a human voice on the other end of the line can create a more personal and trusting connection than text-based communication. It can help build rapport and establish credibility.
Higher Conversion Rate:
For businesses, having a call button can lead to higher conversion rates. Some people prefer talking on the phone when making a buying decision or looking for information. A call can be a critical step in the customer journey, leading to a potential sale or other conversion.
Instant Support:
If the blogger offers services or products, a call button can provide instant support to potential customers. They can ask questions, get clarifications, or get directions, leading to better customer satisfaction.
Capture Leads:
A call button can act as a lead-generation tool. When visitors call, Blogger can collect their contact information and contact them later by nurturing a real customer or customers.
Improved Customer Service:
Providing a call option shows that Blogger is committed to excellent customer service. This can help build a positive reputation and encourage repeat business or visits.
Local Reach:
If the blogger's services or products are location-specific, a call button can help reach potential customers in the same area easily.
Accessibility:
Some viewers may have problems with text-based communication due to disabilities or language barriers. A call button provides an alternative means of communication that is more accessible to certain people. Feedback and Suggestions: Visitors can use the call button to provide feedback, suggestions, or comments directly to the blogger. It can be valuable to improve the website, content, or offer.
Real-Time Problem Solving:
If website visitors encounter problems or need help, a call button can provide a quick way to solve the problem in real-time.
Now we will see how to add call button with blogger.
Here are some call buttons that use css animation effects that I find beautiful, so I should share them with you. The way to do it is also very simple, just go to edit the template and add css to <b:skin>…</b:skin>, then add the html code before the closing </body> tag, edit the phone number and you're done.
Make sure to backup your blogger theme before starting work. Because if it crashes somehow you can go back to where you were before.
Model: 1
Copy this CSS Code and paste above </b:skin>
.Atv-alo-phone{background-color:transparent;cursor:pointer;height:100px;position:fixed;left:0;bottom:0;transition:visibility 0.5s ease 0s;width:100px;z-index:200000!important}.Atv-alo-ph-circle{animation:1.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim;background-color:transparent;border:2px solid rgba(30,30,30,0.4);border-radius:100%;height:100px;left:0;opacity:0.1;position:absolute;top:0;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:100px}.Atv-alo-ph-circle-fill{animation:2.3s ease-in-out 0s normal none infinite running suntory-alo-circle-fill-anim;border:2px solid transparent;border-radius:100%;height:70px;left:15px;position:absolute;top:15px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:70px}.Atv-alo-ph-img-circle{border-radius:100%;height:50px;left:25px;opacity:1;position:absolute;top:25px;transform-origin:50% 50% 0;width:50px;border:3px solid #fff000}.Atv-alo-phone.suntory-alo-hover,.Atv-alo-phone:hover{opacity:1}
.Atv-alo-phone.suntory-alo-active .Atv-alo-ph-circle{animation:1.1s ease-in-out 0s normal none infinite running suntory-alo-circle-anim!important}.Atv-alo-phone.suntory-alo-static .Atv-alo-ph-circle{animation:2.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim!important}.Atv-alo-phone.suntory-alo-hover .Atv-alo-ph-circle,.Atv-alo-phone:hover .Atv-alo-ph-circle{border-color:#00aff2;opacity:0.5}.Atv-alo-phone.suntory-alo-green.suntory-alo-hover .Atv-alo-ph-circle,.Atv-alo-phone.suntory-alo-green:hover .Atv-alo-ph-circle{border-color:#f00;opacity:1}.Atv-alo-phone.suntory-alo-green .Atv-alo-ph-circle{border-color:#fff000;opacity:1}.Atv-alo-phone.suntory-alo-hover .Atv-alo-ph-circle-fill,.Atv-alo-phone:hover .Atv-alo-ph-circle-fill{background-color:rgba(0,175,242,0.9)}
.Atv-alo-phone.suntory-alo-green.suntory-alo-hover .Atv-alo-ph-circle-fill,.Atv-alo-phone.suntory-alo-green:hover .Atv-alo-ph-circle-fill{background-color:#02A6E8}.Atv-alo-phone.suntory-alo-green .Atv-alo-ph-circle-fill{background-color:#02A6E8}.Atv-alo-phone.suntory-alo-hover .Atv-alo-ph-img-circle,.Atv-alo-phone:hover .Atv-alo-ph-img-circle{background-color:#00aff2}.Atv-alo-phone.suntory-alo-green.suntory-alo-hover .Atv-alo-ph-img-circle,.Atv-alo-phone.suntory-alo-green:hover .Atv-alo-ph-img-circle{background-color:#02A6E8}
.Atv-alo-phone.suntory-alo-green .Atv-alo-ph-img-circle{background-color:#02A6E8}
@keyframes suntory-alo-circle-anim{0%{opacity:0.1;transform:rotate(0deg) scale(0.5) skew(1deg)}30%{opacity:0.5;transform:rotate(0deg) scale(0.7) skew(1deg)}100%{opacity:0.6;transform:rotate(0deg) scale(1) skew(1deg)}}@keyframes suntory-alo-circle-img-anim{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}
@keyframes suntory-alo-circle-fill-anim{0%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}50%{opacity:0.2;transform:rotate(0deg) scale(1) skew(1deg)}100%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}}
.Atv-alo-ph-img-circle img{animation:1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim;font-size:30px;line-height:39px;color:#fff;display:block;max-width:100%;height:auto}
@keyframes suntory-alo-ring-ring{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}
Copy this HTML Code and paste above </body>
<a class='Atv-alo-phone suntory-alo-green' href='tel:+8801512345678' rel='nofollow' title='Call'> <div class='Atv-alo-ph-circle'/> <div class='Atv-alo-ph-circle-fill'/> <div class='Atv-alo-ph-img-circle'> <img alt='phone' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRWpXLOk3fItSN1F2n5aC4d12exxrrq2yK7dlUgxzbom1WqyC2jmgovnF9wAxIbunmTGXUK7R_0ZpSINXa9YJycZCExq6o60bJY742xfIlNmuxY7txmpNJlzeKyghq8xAcbmIr8pFpEc/s1600/phone_alo.png'/> </div> </a>
Model: 2
Copy this CSS Code and paste above </b:skin>
.mypage-alo-phone{position:fixed;right:0;bottom:0;visibility:visible;background-color:transparent;width:110px;height:110px;cursor:pointer;z-index:200000!important}
.mypage-alo-ph-circle{width:90px;height:90px;top:12px;left:12px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,.4);opacity:.1;border-color:#00BBD2;opacity:.5}
.mypage-alo-ph-circle-fill{width:60px;height:60px;top:28px;left:28px;position:absolute;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:#00bcd4;opacity:.75!important}
.mypage-alo-ph-img-circle{width:50px;height:50px;top:33px;left:33px;position:absolute;background:rgba(30,30,30,.1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-WSneJWvdOhlA3wRPpXjZ1FgfUtXN02S23qVBOAFmwSU5FgQsOhZkzIE8tzS4odXpGEuk8D0Dj_PBERpfI3KxVlG7ExXqHHehZdrWoYudfzBKecgvkzP1v6g1r97G2k0Haq-uZ6xD4Lf/s1600/phone-icon.png) no-repeat center center;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:.7;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%;background-color:#00BBD2;background-size:70%}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
@-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
@keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
@-webkit-keyframes pulse{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes pulse{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.tada{-webkit-animation-name:tada;animation-name:tada}
@-webkit-keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
Copy this HTML Code and paste above </body>
<a class='call-now' href='tel:+8801512345678' rel='nofollow' title='call'> <div class='mypage-alo-phone'> <div class='animated infinite zoomIn mypage-alo-ph-circle'/> <div class='animated infinite pulse mypage-alo-ph-circle-fill'/> <div class='animated infinite tada mypage-alo-ph-img-circle'/> </div> </a>
Finally save your theme and see the result of your work.
A few words about the above article
Reference: