• ✅ (Đã xác minh)
  • Tạo nút gọi với hiệu ứng chuyên nghiệp cho blogger

    Chia sẻ code tạo nút gọi với hiệu ứng chuyên nghiệp cho blogger chỉ bằng HTML đơn giản, hiển thị đẹp trên cả PC và Mobile.
    > 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.

    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://3.bp.blogspot.com/-jipOkVbgvtk/WPd_CdNwOoI/AAAAAAAAEn0/iYoBqhrSHWgSGDOiEvvEzTYa-khhJt9NACLcB/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>
    Ư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!

    Đăng nhận xét

    Cùng chuyên mục

    Service & High Quality Anh Trai Nang Blogger

    Powered by BFGMedia

    Chuyên dịch vụ dành cho blogspot
    và truyền thông

    Google Fonts

    Integrated with 100+ Google Fonts on the Blogger Template Designer

    Unlimited Sidebars

    Make your own sidebar with our high quality blogger templates

    Font Awesome

    More than 1000 icons

    Exclusive Documentation

    Easy & Exclusive Documentation

    Unlimited Colors

    Customize the Skin of the template with Unlimited Color Options

    Google Analytics

    Place your Tracing Code like Google Analytics Only in few options

    Social Sharing

    100% Compatible with 200+ Social Sharing Websites

    Fully Responsive

    Full Compatibility with all Devices like Mobile, Tablet and Desktop

    No Coding Required

    Customize your Website with No Coding Knowledge Required