Chia sẻ code chèn nút gọi nhanh cho Blogspot hay website

Điểm 4.6/5 dựa vào 87 đánh giá

Công nghệ thiết kế website hay thiết kế Blogspot Responsive ngày càng phát triển mạnh mẽ nhằm giúp chủ sở hữu website có thể tương tác nhiều đối tượng sử dụng các loại thiết bị khác nhau, đặc biệt thiết bị cầm tay truy cập internet. Với người dùng truy cập website hay Blog bằng thiết bị có thể nghe gọi thì nếu website/blog bạn tích hợp tiện ích nút gọi nhanh này thì người dùng sẽ gọi cho bạn một cách nhanh chóng chỉ với 1 thao tác đơn giản khi họ cần liên hệ với chủ website.

Chia sẻ code chèn nút gọi nhanh cho Blogspot hay website

Ở đây chỉ sử dụng CSS và HTML nên code nhẹ nhàng không ảnh hưởng tốc độ load của website và cài đặt cũng nhanh chóng, bên dưới là đoạn code bạn chỉ cần copy và dán ngay sau thẻ <body> trong Blogpot là có thể chạy được ngay

1. Đăng nhập vào tài khoản Blogspot
2. Vào chủ đề (Theme)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Nhấn Ctrl F tìm thẻ <body> và dán đoạn code sau ngay dưới thẻ <body> là xong
<style>.callme_by_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 }.callme_by_phone.callme_mobile-show{visibility:visible }.callme_by_phone.callme_mobile-static{opacity:.6 }.callme_by_phone.callme_mobile-hover,.callme_by_phone:hover{opacity:1 }.callme_mobile-ph-circle{width:160px;height:160px;top:20px;left:20px;position:absolute;background-color:transparent;border-radius:100%;border:2px solid #fff;opacity:.1;-webkit-animation:callme_mobile-circle-anim 1.2s infinite ease-in-out;animation:callme_mobile-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% }.callme_by_phone.callme_mobile-active .callme_mobile-ph-circle{-webkit-animation:callme_mobile-circle-anim 1.1s infinite ease-in-out!important;animation:callme_mobile-circle-anim 1.1s infinite ease-in-out!important }.callme_by_phone.callme_mobile-static .callme_mobile-ph-circle{-webkit-animation:callme_mobile-circle-anim 2.2s infinite ease-in-out!important;animation:callme_mobile-circle-anim 2.2s infinite ease-in-out!important }.callme_by_phone.callme_mobile-hover .callme_mobile-ph-circle,.callme_by_phone:hover .callme_mobile-ph-circle{border-color:#047ee5;opacity:.5 }.callme_by_phone.callme_mobile-green.callme_mobile-hover .callme_mobile-ph-circle,.callme_by_phone.callme_mobile-green:hover .callme_mobile-ph-circle{border-color:#ea6402;opacity:.5 }.callme_by_phone.callme_mobile-green .callme_mobile-ph-circle{border-color:#047ee5;opacity:.5 }.callme_by_phone.callme_mobile-gray.callme_mobile-hover .callme_mobile-ph-circle,.callme_by_phone.callme_mobile-gray:hover .callme_mobile-ph-circle{border-color:#ccc;opacity:.5 }.callme_by_phone.callme_mobile-gray .callme_mobile-ph-circle{border-color:#047ee5;opacity:.5 }.callme_mobile-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:callme_mobile-circle-fill-anim 2.3s infinite ease-in-out;animation:callme_mobile-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% }.callme_by_phone.callme_mobile-active .callme_mobile-ph-circle-fill{-webkit-animation:callme_mobile-circle-fill-anim 1.7s infinite ease-in-out!important;animation:callme_mobile-circle-fill-anim 1.7s infinite ease-in-out!important }.callme_by_phone.callme_mobile-static .callme_mobile-ph-circle-fill{-webkit-animation:callme_mobile-circle-fill-anim 2.3s infinite ease-in-out!important;animation:callme_mobile-circle-fill-anim 2.3s infinite ease-in-out!important;opacity:0!important }.callme_by_phone.callme_mobile-hover .callme_mobile-ph-circle-fill,.callme_by_phone:hover .callme_mobile-ph-circle-fill{background-color:#fd8228;opacity:.75!important }.callme_by_phone.callme_mobile-green.callme_mobile-hover .callme_mobile-ph-circle-fill,.callme_by_phone.callme_mobile-green:hover .callme_mobile-ph-circle-fill{background-color:#fd8228;opacity:.75!important }.callme_by_phone.callme_mobile-green .callme_mobile-ph-circle-fill{background-color:#047ee5 }.callme_by_phone.callme_mobile-gray.callme_mobile-hover .callme_mobile-ph-circle-fill,.callme_by_phone.callme_mobile-gray:hover .callme_mobile-ph-circle-fill{background-color:rgba(204,204,204,0.5);opacity:.75!important }.callme_by_phone.callme_mobile-gray .callme_mobile-ph-circle-fill{background-color:rgba(117,235,80,0.5);opacity:.75!important }.callme_mobile-ph-img-circle{width:60px;height:60px;top:70px;left:70px;position:absolute;background:rgba(30,30,30,0.1) url(https://lh4.googleusercontent.com/-qiNvuZjLH5o/Wv0vzThsCmI/AAAAAAAADfM/rOZKIO0pa6AYQBNoefMyuUOO-is-ZmGIACLcBGAs/s1600/alo.png) no-repeat center center;border-radius:100%;border:2px solid transparent;-webkit-animation:callme_mobile-circle-img-anim 1s infinite ease-in-out;animation:callme_mobile-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50% }.callme_by_phone.callme_mobile-active .callme_mobile-ph-img-circle{-webkit-animation:callme_mobile-circle-img-anim 1s infinite ease-in-out!important;animation:callme_mobile-circle-img-anim 1s infinite ease-in-out!important }.callme_by_phone.callme_mobile-static .callme_mobile-ph-img-circle{-webkit-animation:callme_mobile-circle-img-anim 0 infinite ease-in-out!important;animation:callme_mobile-circle-img-anim 0 infinite ease-in-out!important }.callme_by_phone.callme_mobile-hover .callme_mobile-ph-img-circle,.callme_by_phone:hover .callme_mobile-ph-img-circle{background-color:#047ee5 }.callme_by_phone.callme_mobile-green.callme_mobile-hover .callme_mobile-ph-img-circle,.callme_by_phone.callme_mobile-green:hover .callme_mobile-ph-img-circle{background-color:#ea6402 }.callme_by_phone.callme_mobile-green .callme_mobile-ph-img-circle{background-color:#047ee5;border:3px solid #fff;}.callme_by_phone.callme_mobile-gray.callme_mobile-hover .callme_mobile-ph-img-circle,.callme_by_phone.callme_mobile-gray:hover .callme_mobile-ph-img-circle{background-color:#ccc }.callme_by_phone.callme_mobile-gray .callme_mobile-ph-img-circle{background-color:#047ee5 }@-webkit-keyframes callme_mobile-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 callme_mobile-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 callme_mobile-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 callme_mobile-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 callme_mobile-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 callme_mobile-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 callme_mobile-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 callme_mobile-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 callme_mobile-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='callme'>
<div class='callme_by_phone callme_mobile-green callme_mobile-show' id='callme_by_phoneIcon'>
<div class='callme_mobile-ph-circle'/>
<div class='callme_mobile-ph-circle-fill'/>
<div class='callme_mobile-ph-img-circle'>
<a class='pps-btn-img ' href='tel:0917756426' title='Gọi cho tôi'> <img alt='Gọi cho tôi' class='img-responsive' src='https://lh4.googleusercontent.com/-HSdx1NfSRM4/Wv0rIPktRVI/AAAAAAAADfA/e0A-9dnyKKsx3QD2_D7Yh33jDKJgLKFHQCLcBGAs/s1600/fdf.png' width='50'/> </a>
</div>
</div>
</div>

Thay đổi số điện thoại ở trên lại thành số điện thoại của bạn.

5. Lưu template lại và xem kết quả

Chúc bạn thành công!

Loading...

Không có nhận xét nào