Currently, web design, whether it's a cheap web design, or a Google blogspot design , requires that it be compatible with mobile devices, such as a mobile-compatible website, or a mobile-compatible blogspot and PC, comes with the included module utilities such as the call button for the website (the call button for blogspot).
Demo Call button for website (Call button for blogspot)
By the way of designing a new blogspot for guests, TrickPk installed the below code in the sales blogspot template and instructed those who do not know the code to copy and use it.
How to create a Call Button for Website
Here, I show you how to use blogspot, you can also create a new widget and paste the following code in it.
For Blogspot:
Login => Layout => Create a JavaScript/HTML widget => Paste the call button code for the website, the call button code for blogspot as below:
<style> /* Call Button By TrickPk */ .trickpk-call-phone {position:fixed;visibility:hidden;background-color:transparent;width:200px;height:200px; cursor:pointer;z-index:200000!important;right:150px;bottom:-50px;left:-50px;display:block; -webkit-backface-visibility:hidden; -webkit-transform:translateZ(0); transition:visibility .5s; } .trickpk-call-phone.trickpk-call-show {visibility:visible} .trickpk-call-phone.trickpk-call-static {opacity:.6} .trickpk-call-phone.trickpk-call-hover,.trickpk-call-phone:hover {opacity:1} .trickpk-call-ph-circle {width:160px;height:160px;top:20px;left:20px;position:absolute; background-color:transparent;border-radius:100%;border:2px solid rgba(30,30,30,0.4); opacity:.1; -webkit-animation:trickpk-call-circle-anim 1.2s infinite ease-in-out; animation:trickpk-call-circle-anim 1.2s infinite ease-in-out; transition:all .5s; -webkit-transform-origin:50% 50%; -ms-transform-origin:50% 50%; transform-origin:50% 50% } .trickpk-call-phone.trickpk-call-active .trickpk-call-ph-circle { -webkit-animation:trickpk-call-circle-anim 1.1s infinite ease-in-out!important; animation:trickpk-call-circle-anim 1.1s infinite ease-in-out!important } .trickpk-call-phone.trickpk-call-static .trickpk-call-ph-circle { -webkit-animation:trickpk-call-circle-anim 2.2s infinite ease-in-out!important; animation:trickpk-call-circle-anim 2.2s infinite ease-in-out!important } .trickpk-call-phone.trickpk-call-hover .trickpk-call-ph-circle,.trickpk-call-phone:hover .trickpk-call-ph-circle { border-color:#00aff2; opacity:.5 } .trickpk-call-phone.trickpk-call-green.trickpk-call-hover .trickpk-call-ph-circle,.trickpk-call-phone.trickpk-call-green:hover .trickpk-call-ph-circle { border-color:#272d6b; opacity:.5 } .trickpk-call-phone.trickpk-call-green .trickpk-call-ph-circle { border-color:#00aff2; opacity:.5 } .trickpk-call-phone.trickpk-call-gray.trickpk-call-hover .trickpk-call-ph-circle,.trickpk-call-phone.trickpk-call-gray:hover .trickpk-call-ph-circle { border-color:#ccc; opacity:.5 } .trickpk-call-phone.trickpk-call-gray .trickpk-call-ph-circle { border-color:#75eb50; opacity:.5 } .trickpk-call-ph-circle-fill {width:100px;height:100px;top:50px;left:50px;position:absolute;background-color:#000; border-radius:100%;border:2px solid transparent; -webkit-animation:trickpk-call-circle-fill-anim 2.3s infinite ease-in-out; animation:trickpk-call-circle-fill-anim 2.3s infinite ease-in-out; transition:all .5s; -webkit-transform-origin:50% 50%; -ms-transform-origin:50% 50%; transform-origin:50% 50% } .trickpk-call-phone.trickpk-call-active .trickpk-call-ph-circle-fill { -webkit-animation:trickpk-call-circle-fill-anim 1.7s infinite ease-in-out!important; animation:trickpk-call-circle-fill-anim 1.7s infinite ease-in-out!important } .trickpk-call-phone.trickpk-call-static .trickpk-call-ph-circle-fill { -webkit-animation:trickpk-call-circle-fill-anim 2.3s infinite ease-in-out!important; animation:trickpk-call-circle-fill-anim 2.3s infinite ease-in-out!important; opacity:0!important } .trickpk-call-phone.trickpk-call-hover .trickpk-call-ph-circle-fill,.trickpk-call-phone:hover .trickpk-call-ph-circle-fill { background-color:rgba(39,45,107,0.5); opacity:.75!important } .trickpk-call-phone.trickpk-call-green.trickpk-call-hover .trickpk-call-ph-circle-fill,.trickpk-call-phone.trickpk-call-green:hover .trickpk-call-ph-circle-fill { background-color:rgba(39,45,107,0.5); opacity:.75!important } .trickpk-call-phone.trickpk-call-green .trickpk-call-ph-circle-fill { background-color:rgba(0,175,242,0.5); } .trickpk-call-phone.trickpk-call-gray.trickpk-call-hover .trickpk-call-ph-circle-fill,.trickpk-call-phone.trickpk-call-gray:hover .trickpk-call-ph-circle-fill { background-color:rgba(204,204,204,0.5); opacity:.75!important } .trickpk-call-phone.trickpk-call-gray .trickpk-call-ph-circle-fill { background-color:rgba(117,235,80,0.5); opacity:.75!important } .trickpk-call-ph-img-circle { width:60px; height:60px; top:70px; left:70px; position:absolute; background:rgba(30,30,30,0.1) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) no-repeat center center; border-radius:100%; border:2px solid transparent; -webkit-animation:trickpk-call-circle-img-anim 1s infinite ease-in-out; animation:trickpk-call-circle-img-anim 1s infinite ease-in-out; -webkit-transform-origin:50% 50%; -ms-transform-origin:50% 50%; transform-origin:50% 50% } .trickpk-call-phone.trickpk-call-active .trickpk-call-ph-img-circle { -webkit-animation:trickpk-call-circle-img-anim 1s infinite ease-in-out!important; animation:trickpk-call-circle-img-anim 1s infinite ease-in-out!important } .trickpk-call-phone.trickpk-call-static .trickpk-call-ph-img-circle { -webkit-animation:trickpk-call-circle-img-anim 0 infinite ease-in-out!important; animation:trickpk-call-circle-img-anim 0 infinite ease-in-out!important } .trickpk-call-phone.trickpk-call-hover .trickpk-call-ph-img-circle,.trickpk-call-phone:hover .trickpk-call-ph-img-circle { background-color:#00aff2; } .trickpk-call-phone.trickpk-call-green.trickpk-call-hover .trickpk-call-ph-img-circle,.trickpk-call-phone.trickpk-call-green:hover .trickpk-call-ph-img-circle { background-color:#272d6b; } .trickpk-call-phone.trickpk-call-green .trickpk-call-ph-img-circle { background-color:#00aff2; } .trickpk-call-phone.trickpk-call-gray.trickpk-call-hover .trickpk-call-ph-img-circle,.trickpk-call-phone.trickpk-call-gray:hover .trickpk-call-ph-img-circle { background-color:#ccc; } .trickpk-call-phone.trickpk-call-gray .trickpk-call-ph-img-circle { background-color:#75eb50 } @-webkit-keyframes trickpk-call-circle-anim { 0% { -webkit-transform:rotate(0) scale(.5) skew(1deg); -webkit-opacity:.1 } 30% { -webkit-transform:rotate(0) scale(.7) skew(1deg); -webkit-opacity:.5 } 100% { -webkit-transform:rotate(0) scale(1) skew(1deg); -webkit-opacity:.1 } } @-webkit-keyframes trickpk-call-circle-fill-anim { 0% { -webkit-transform:rotate(0) scale(.7) skew(1deg); opacity:.2 } 50% { -webkit-transform:rotate(0) scale(1) skew(1deg); opacity:.2 } 100% { -webkit-transform:rotate(0) scale(.7) skew(1deg); opacity:.2 } } @-webkit-keyframes trickpk-call-circle-img-anim { 0% { -webkit-transform:rotate(0) scale(1) skew(1deg) } 10% { -webkit-transform:rotate(-25deg) scale(1) skew(1deg) } 20% { -webkit-transform:rotate(25deg) scale(1) skew(1deg) } 30% { -webkit-transform:rotate(-25deg) scale(1) skew(1deg) } 40% { -webkit-transform:rotate(25deg) scale(1) skew(1deg) } 50% { -webkit-transform:rotate(0) scale(1) skew(1deg) } 100% { -webkit-transform:rotate(0) scale(1) skew(1deg) } } @-webkit-keyframes trickpk-call-circle-anim { 0% { -webkit-transform:rotate(0) scale(.5) skew(1deg); transform:rotate(0) scale(.5) skew(1deg); opacity:.1 } 30% { -webkit-transform:rotate(0) scale(.7) skew(1deg); transform:rotate(0) scale(.7) skew(1deg); opacity:.5 } 100% { -webkit-transform:rotate(0) scale(1) skew(1deg); transform:rotate(0) scale(1) skew(1deg); opacity:.1 } } @keyframes trickpk-call-circle-anim { 0% { -webkit-transform:rotate(0) scale(.5) skew(1deg); transform:rotate(0) scale(.5) skew(1deg); opacity:.1 } 30% { -webkit-transform:rotate(0) scale(.7) skew(1deg); transform:rotate(0) scale(.7) skew(1deg); opacity:.5 } 100% { -webkit-transform:rotate(0) scale(1) skew(1deg); transform:rotate(0) scale(1) skew(1deg); opacity:.1 } } @-webkit-keyframes trickpk-call-circle-fill-anim { 0% { -webkit-transform:rotate(0) scale(.7) skew(1deg); transform:rotate(0) scale(.7) skew(1deg); opacity:.2 } 50% { -webkit-transform:rotate(0) scale(1) skew(1deg); transform:rotate(0) scale(1) skew(1deg); opacity:.2 } 100% { -webkit-transform:rotate(0) scale(.7) skew(1deg); transform:rotate(0) scale(.7) skew(1deg); opacity:.2 } } @keyframes trickpk-call-circle-fill-anim { 0% { -webkit-transform:rotate(0) scale(.7) skew(1deg); transform:rotate(0) scale(.7) skew(1deg); opacity:.2 } 50% { -webkit-transform:rotate(0) scale(1) skew(1deg); transform:rotate(0) scale(1) skew(1deg); opacity:.2 } 100% { -webkit-transform:rotate(0) scale(.7) skew(1deg); transform:rotate(0) scale(.7) skew(1deg); opacity:.2 } } @-webkit-keyframes trickpk-call-circle-img-anim { 0% { -webkit-transform:rotate(0) scale(1) skew(1deg); transform:rotate(0) scale(1) skew(1deg) } 10% { -webkit-transform:rotate(-25deg) scale(1) skew(1deg); transform:rotate(-25deg) scale(1) skew(1deg) } 20% { -webkit-transform:rotate(25deg) scale(1) skew(1deg); transform:rotate(25deg) scale(1) skew(1deg) } 30% { -webkit-transform:rotate(-25deg) scale(1) skew(1deg); transform:rotate(-25deg) scale(1) skew(1deg) } 40% { -webkit-transform:rotate(25deg) scale(1) skew(1deg); transform:rotate(25deg) scale(1) skew(1deg) } 50% { -webkit-transform:rotate(0) scale(1) skew(1deg); transform:rotate(0) scale(1) skew(1deg) } 100% { -webkit-transform:rotate(0) scale(1) skew(1deg); transform:rotate(0) scale(1) skew(1deg) } } @keyframes trickpk-call-circle-img-anim { 0% { -webkit-transform:rotate(0) scale(1) skew(1deg); transform:rotate(0) scale(1) skew(1deg) } 10% { -webkit-transform:rotate(-25deg) scale(1) skew(1deg); transform:rotate(-25deg) scale(1) skew(1deg) } 20% { -webkit-transform:rotate(25deg) scale(1) skew(1deg); transform:rotate(25deg) scale(1) skew(1deg) } 30% { -webkit-transform:rotate(-25deg) scale(1) skew(1deg); transform:rotate(-25deg) scale(1) skew(1deg) } 40% { -webkit-transform:rotate(25deg) scale(1) skew(1deg); transform:rotate(25deg) scale(1) skew(1deg) } 50% { -webkit-transform:rotate(0) scale(1) skew(1deg); transform:rotate(0) scale(1) skew(1deg) } 100% { -webkit-transform:rotate(0) scale(1) skew(1deg); transform:rotate(0) scale(1) skew(1deg) } } </style> <div class="hotline"> <div id="trickpk-call-phoneIcon" class="trickpk-call-phone trickpk-call-green trickpk-call-show"> <div class="trickpk-call-ph-circle"></div> <div class="trickpk-call-ph-circle-fill"></div> <div class="trickpk-call-ph-img-circle"> <a class="pps-btn-img " title="Call at" href="tel:92348000000"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr36tvBeeIZK44YSDyzFERKrkCJ_a-0cFxQSvrAejkpG9xhUeluP1y9pCtGKtXITP3-Akle32eQ8XE1zY783pAeY4WdjcW379_yliwvxKF4wLWMnvFVa4Txc9sJILUhpr1lrR014zA4d4i/s1600/v8TniL3.png" alt="Liên hệ" width="50" class="img-responsive"/> </a> </div> </div> </div>
Note: You change the phone number highlighted in yellow to a phone number your.