F Tạo nút gọi với hiệu ứng chuyên nghiệp cho blogger | TIẾNG HOA ĐÔNG NAM BỘ 东南部华语中心 LH0946853386 để học tiếng Hoa

Tạo nút gọi với hiệu ứng chuyên nghiệp cho blogger

0 0 01 tháng 9, 2023

  Sẽ thật là tuyệt vời nếu như khách hàng, đọc giả vào trang  Blogger  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ọ...

 Sẽ thật là tuyệt vời nếu như khách hàng, đọc giả vào trang Blogger 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.

Tạo nút gọi với hiệu ứng chuyên nghiệp cho blogger
Code Tạo nút gọi với hiệu ứng chuyên nghiệp cho blogger

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'>
<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/AVvXsEja5NGLzmUo-flJwpo_s9Rgm9hd_0VkP5u9K-Rzs7GIUG0FHOFJFK8gsTpnPt-hVxGtZWO_7goGB19iUug9x16FoxP2PI8Ni1TzcnAlp_ZaDXme_gaxMEL1kEvu5JCN54pDjxSiZFIVPWpj/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>

Lưu ý thay số điện thoại của bạn nha.

Ư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 trang và SEO. Chúc các bạn thành công, ủng hộ mình bằng 1 comment phía dưới nhé, xin cám ơn!

Tags

SHARE:

Twitter Facebook Google Pinterest

COMMENTS

BLOGGER
DISQUS
Tên

Bài báo,40,Blog,9,Chữ Hán,3,Đời sống,73,Giáo trình,48,Hán ngữ,119,Học tập hiệu quả,87,HSK,41,khác,106,Lịch sử,9,Ngữ pháp Hán ngữ,65,Người Hoa,41,QC,17,Quizlet,12,Tiếng Trung công sở,3,Tiếng Trung Thương mại,2,Tôi và học sinh,22,Tuyển sinh,38,Văn hóa Trung Hoa,34,Về tôi,2,
ltr
item
TIẾNG HOA ĐÔNG NAM BỘ 东南部华语中心 LH0946853386 để học tiếng Hoa: Tạo nút gọi với hiệu ứng chuyên nghiệp cho blogger
Tạo nút gọi với hiệu ứng chuyên nghiệp cho blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho9l1_DHcWfxe12PFeiXRYS5lfLxqhLcPncJ9ClZ9B3Ldfn6bx48yR6st5i7aZfZEr5HEAu-UJfBZQoTr0-EtfZnpEvobFeGYoaNkN-sosZI-qRboRHUj06NaaqD7vGjQCzk10qesODkA/s1600/tao-nut-goi-voi-hieu-ung-chuyen-nghiep-cho-blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho9l1_DHcWfxe12PFeiXRYS5lfLxqhLcPncJ9ClZ9B3Ldfn6bx48yR6st5i7aZfZEr5HEAu-UJfBZQoTr0-EtfZnpEvobFeGYoaNkN-sosZI-qRboRHUj06NaaqD7vGjQCzk10qesODkA/s72-c/tao-nut-goi-voi-hieu-ung-chuyen-nghiep-cho-blogger.png
TIẾNG HOA ĐÔNG NAM BỘ 东南部华语中心 LH0946853386 để học tiếng Hoa
https://www.tiendunglhu.com/2023/09/tao-nut-goi-voi-hieu-ung-chuyen-nghiep.html
https://www.tiendunglhu.com/
https://www.tiendunglhu.com/
https://www.tiendunglhu.com/2023/09/tao-nut-goi-voi-hieu-ung-chuyen-nghiep.html
true
5087089046603486458
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Liên hệ
0946.85.33.86