• Giới thiệu
  • Liên hệ
  • Điều khoản
  • Bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
No Result
View All Result
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
No Result
View All Result
Đoàn Hải Blog - Kiến Thức Đó Đây
No Result
View All Result

Hướng dẫn thêm Nút gọi điện cho blogspot

admin by admin
Tháng Chín 19, 2021
Home Blogspot Thủ Thuật Blogspot

Hướng dẫn thêm Nút gọi điện cho blogspot đơn giản dễ làm, phù hợp cho blogspot bán hàng, tư vấn dịch vụ, chốt đơn.

Hướng dẫn thêm Nút gọn điện cho blogspot
thêm Nút gọi điện cho blogspot

Hướng dẫn thêm Nút gọi điện cho blogspot

Cách cài đặt đơn giản là bạn chỉ cần copy toàn bộ code dán trước thẻ </body> và lưu lại là xong.

 

<style>
.hotline-phone-ring-wrap{position:fixed;bottom:0;left:0;z-index:999999}
.hotline-phone-ring{position:relative;visibility:visible;background-color:transparent;width:110px;height:110px;cursor:pointer;z-index:11;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transition:visibility .5s;left:0;bottom:0;display:block}
.hotline-phone-ring-circle{width:85px;height:85px;top:10px;left:10px;position:absolute;background-color:transparent;border-radius:100%;border:2px solid #e60808;-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%;opacity:0.5}
.hotline-phone-ring-circle-fill{width:55px;height:55px;top:25px;left:25px;position:absolute;background-color:rgba(230,8,8,0.7);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%}
.hotline-phone-ring-img-circle{background-color:#e60808;width:33px;height:33px;top:37px;left:37px;position:absolute;background-size:20px;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%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;justify-content:center}
.hotline-phone-ring-img-circle .pps-btn-img{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
.hotline-phone-ring-img-circle .pps-btn-img img{width:20px;height:20px}
.hotline-bar{position:absolute;background:rgba(230,8,8,0.75);height:40px;width:180px;line-height:40px;border-radius:3px;padding:0 10px;background-size:100%;cursor:pointer;transition:all 0.8s;-webkit-transition:all 0.8s;z-index:9;box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.1);border-radius:50px!important;left:33px;bottom:37px}
.hotline-bar > a{color:#fff;text-decoration:none;font-size:15px;font-weight:bold;text-indent:50px;display:block;letter-spacing:1px;line-height:40px;font-family:Arial}
.hotline-bar > a:hover,.hotline-bar > a:active{color:#fff}
@-webkit-keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(0.5) skew(1deg);-webkit-opacity:0.1}30%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);-webkit-opacity:0.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:0.1}}
@-webkit-keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);opacity:0.6}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:0.6}100%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);opacity:0.6}}
@-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)}}
@media (max-width:768px){.hotline-bar{display:none}}
</style>
<div class='hotline-phone-ring-wrap'>
  <div class='hotline-phone-ring'>
    <div class='hotline-phone-ring-circle'></div>
    <div class='hotline-phone-ring-circle-fill'></div>
    <div class='hotline-phone-ring-img-circle'>
      <a class='pps-btn-img' href='tel:097xxxx' rel='noreferrer'>
        <img alt='Gọi điện thoại' src='https://1.bp.blogspot.com/--OCZvbZrZ0g/XxT-mLLFcAI/AAAAAAAALHI/JnQ08f9qwpAux6YBCDqNl-kbBJcxwNcHACLcBGAsYHQ/s1600/icon-call-nh.png' width='50' />
      </a>
    </div>
  </div>
  <div class='hotline-bar'>
    <a href='tel:097xxxx' rel='noreferrer'>
      <span class='text-hotline'>097 1539 681</span>
    </a>
  </div>
</div>

Lưu ý: Thay mục 097xxxx thành số điện thoại của bạn

Đánh giá bài viết
[Total: 1 Average: 5]

Bài viết liên quan:

  1. Chia Sẻ Bộ Social Icons Tuyệt Đẹp Cho Blogspot
  2. Tạo trang chuyển hướng liên kết ngoài cho blogspot
  3. Tạo hiệu ứng loading đẹp cho blogspot
  4. Hướng dẫn thêm Google Analytics vào Blogger 2022
  5. Chèn bài viết liên quan vào giữa bài viết blogspot
Tags: thêm Nút gọi điện cho blogspot
admin

admin

Next Post
Chặn các liên kết spam trong comment blogspot

Chặn các liên kết spam trong comment blogspot

Download Full bộ Adobe CC 2021 Full Crack Miễn Phí

Download Full bộ Adobe CC 2021 Full Crack Miễn Phí

Download trọn bộ Adobe CC 2020 Full Crack

Download trọn bộ Adobe CC 2020 Full Crack

Subscribe
Login
Notify of
guest
guest
0 Comments
Inline Feedbacks
Xem tất cả các bình luận

Chứng chỉ SSL là gì? • Kiến nghêu

Cách tạo các biến thể sản phẩm trong WordPress

Cách thêm tawk.to vào trang web wordpress

Cách gắn Pixel Facebook trên trang web WordPress của bạn một cách dễ dàng

CÁCH SỬ DỤNG WIDGET TRONG WORDPRESS

Hướng dẫn quản lý thành viên trên website wordpress

  • Viết BLog
    • Giới thiệu
    • Liên hệ
    • Điều khoản
    • Bảo mật

    © 2021 Đoàn Hải Blog

    No Result
    View All Result
    • Home
    • Designer
      • PHOTOSHOP
        • Tutorial
        • Download
      • ILLUSTRATOR
        • Tutorial
        • Download
      • LIGHTROOM
        • Tutorial
        • Download
      • PHOTOGRAPHY
    • Blogspot
      • Template Blogspot
      • Thủ Thuật Blogspot
    • WordPress
      • Plugin WordPress
      • Theme WordPress
      • Thủ Thuật WordPress
    • Thủ Thuật
      • Công Nghệ
      • Web
      • Windows
    • Tài Liệu
      • Lập Trình
      • Khóa học
      • Phần mềm

    © 2021 Đoàn Hải Blog

    wpDiscuz
    0
    0
    Rất thích suy nghĩ của bạn, hãy bình luậnx
    ()
    x
    | Reply