> Xem thêm: Tạo tiện ích liên hệ cố định đơn giản cho blogspot và website
Sẽ thật là tuyệt vời nếu như khách hàng, đọc giả vào trang blog hoặc website của bạn sẽ hoàn toàn có thể liên lạc với bạn bằng nút gọi điện ngay phía dưới góc màn hình.
Hôm nay ngay tại bài viết này tôi sẽ giúp đỡ bạn làm việc đó thật đễ dàng. Và tôi hứa là trong bài này sẽ hướng dẫn dễ dàng nhất để bạn có thể chèn các nút gọi điện.
Thực hiện: Coppy toàn bộ code phía dưới và dán lên trên thẻ đóng /body. Sau đó sửa thông tin số điện thoại của mình lại là được rồi.
Sẽ thật là tuyệt vời nếu như khách hàng, đọc giả vào trang blog hoặc website của bạn sẽ hoàn toàn có thể liên lạc với bạn bằng nút gọi điện ngay phía dưới góc màn hình.
Hôm nay ngay tại bài viết này tôi sẽ giúp đỡ bạn làm việc đó thật đễ dàng. Và tôi hứa là trong bài này sẽ hướng dẫn dễ dàng nhất để bạn có thể chèn các nút gọi điện.
Thực hiện: Coppy toàn bộ code phía dưới và dán lên trên thẻ đóng /body. Sau đó sửa thông tin số điện thoại của mình lại là được rồi.
<div class='hotline'>Ưu điểm của nó là hoàn toàn bằng css nên các bạn không phải lo ngại gì về vấn đề load. Chúc các bạn thành công, ủng hộ mình bằng 1 like phía dưới nhé, xin cám ơn!
<div class='phonering-alo-phone phonering-alo-green phonering-alo-show' id='phonering-alo-phoneIcon'>
<div class='phonering-alo-ph-circle'/>
<div class='phonering-alo-ph-circle-fill'/>
<div class='phonering-alo-ph-img-circle'>
<a class='pps-btn-img ' href='tel:0984.541.045' title='Liên hệ'>
<img alt='Liên hệ' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkZr0Y5NXHhYavsI04w6vQ6h0sAzKym1IsQOx4sfkg2utNY-QIcRJtsxh18dGHAuNPcEPvZIkfOSi91UBzNTayod_op4f0J_5COFOwFwckzXrI7Z1GaWWEoaOzYkJks3_R_I1RTBJvMTQf/s1600/v8TniL3.png' width='50'/>
</a>
</div>
</div>
</div>
<style>
#call { display: block;
position: fixed;
bottom: 15px;
left: 45px;
z-index: 99;
border: none;
outline: none;
background-color: #e51218;
color: #fff;
cursor: pointer;
padding: 7px 20px 7px 30px;
border-radius: 0 32px;
font-weight: 700;
font-size: 18px;
}
/* HOTLINE */
.phonering-alo-phone {position:fixed;visibility:hidden;background-color:transparent;width:200px;height:200px;
cursor:pointer;z-index:200000!important;right:150px;bottom:-60px;left:-75px;display:block;
-webkit-backface-visibility:hidden;
-webkit-transform:translateZ(0);
transition:visibility .5s;
}
.phonering-alo-phone.phonering-alo-show {visibility:visible}
.phonering-alo-phone.phonering-alo-static {opacity:.6}
.phonering-alo-phone.phonering-alo-hover,.phonering-alo-phone:hover {opacity:1}
.phonering-alo-ph-circle {width:140px;height:140px;top:35px;left:35px;position:absolute;
background-color:transparent;border-radius:100%;border:2px solid rgba(30,30,30,0.4);
opacity:.1;
-webkit-animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;
animation:phonering-alo-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%
}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle {
-webkit-animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important;
animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important
}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle {
-webkit-animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important;
animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important
}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone:hover .phonering-alo-ph-circle {
border-color:red;
opacity:.5
}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle {
border-color:#5ca038;
opacity:.5
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {
border-color:red;
opacity:.5
}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle {
border-color:#ccc;
opacity:.5
}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle {
border-color:#75eb50;
opacity:.5
}
.phonering-alo-ph-circle-fill {width:80px;height:80px;top:65px;left:65px;position:absolute;background-color:#000;
border-radius:100%;border:2px solid transparent;
-webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
animation:phonering-alo-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%
}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle-fill {
-webkit-animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important;
animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important
}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle-fill {
-webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
opacity:0!important
}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone:hover .phonering-alo-ph-circle-fill {
background-color:rgba(39,45,107,0.5);
opacity:.75!important
}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle-fill {
background-color:rgba(39,45,107,0.5);
opacity:.75!important
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill {
background-color:rgba(0,175,242,0.5);
}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle-fill {
background-color:rgba(204,204,204,0.5);
opacity:.75!important
}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle-fill {
background-color:rgba(117,235,80,0.5);
opacity:.75!important
}
.phonering-alo-ph-img-circle {
width:50px;
height:50px;
top:80px;
left:80px;
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:phonering-alo-circle-img-anim 1s infinite ease-in-out;
animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;
-webkit-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
transform-origin:50% 50%
}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-img-circle {
-webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important;
animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important
}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-img-circle {
-webkit-animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important;
animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important
}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone:hover .phonering-alo-ph-img-circle {
background-color:red;
}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-img-circle {
background-color:#5ca038;
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {
background-color:red;
}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-img-circle {
background-color:#ccc;
}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-img-circle {
background-color:#75eb50
}
@-webkit-keyframes phonering-alo-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 phonering-alo-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 phonering-alo-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 phonering-alo-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 phonering-alo-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 phonering-alo-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 phonering-alo-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 phonering-alo-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 phonering-alo-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>
<a href='tel:0984541045' id='call'> 0984.541.045</a>
0 Nhận xét
Đăng nhận xét