• 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
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
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
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
Tin Tức Tổng Hợp
No Result
View All Result

Thêm Tiện ích Zalo gọi điện cho blogspot

admin by admin
Tháng Chín 19, 2021
Home Blogspot

Chia sẻ code Thêm Tiện ích Zalo gọi điện cho blogspot đẹp phù hợp với blogspot bán hàng, blogspot làm dịch vụ tư vấn hoặc các website khác tương tự.

Thêm Tiện ích Zalo gọi điện cho blogspot
Thêm Tiện ích Zalo gọi điện cho blogspot

Thêm Tiện ích Zalo gọi điện cho blogspot

Các bạn chỉ cần copy toàn bộ đoạn code bên trên dán trước thẻ đóng </body> và lưu lại là xong, như vậy là bạn đã có tiện ích liên hệ cho trang web của mình rồi.

<style>
.main-widget .def-content .item .img svg path{fill:#ffffff}
.main-widge .img svg{width:100%;height:100%}
.main-widget .img{width:25px;height:25px}
.main-icon svg{width:30px;height:30px;fill:#fff}
.main-icon svg#svg_icon_main{position:relative;top:-2px;left:-2px}
.main-widget{position:fixed;left:10px;bottom:10px;z-index:1000;top:auto!important}
.out-circle{overflow:hidden;padding:17px;border-radius:100%;background:#fec576;width:60px;height:60px}
.main-icon{line-height:0;color:#fff;width:100%;height:100%}
.main-icon i{width:26px;height:26px;transform:translateX(2px)}
.ser-icon{display:inline-flex;position:absolute;font-size:30px;top:0;left:0;padding:10%;background:#fff;max-width:100%;overflow:hidden;border-radius:100%;color:#fec576;width:70%;height:70%;margin:15%;transition:.2s all}
.unsee{opacity:0;transform:scale(0)}
.process{display:inline-flex;transform:translateX(0px);transition:0.15s linear transform;line-height:0}
.ser-icon .item{margin-right:40px;width:30px;height:30px}
.ser-icon i:nth-child(2n){color:#000}
.def-content{position:absolute;bottom:70px;left:0;width:270px;background:#fff;border-radius:5px;transition:.2s all;box-shadow:0 0 15px 0 #333}
.def-content .item{width:100%;line-height:0;padding:5px 10px;transition:.3s linear all}
.def-content .item:last-child{margin-bottom:0}
.def-content .item>a>*{float:left;line-height:1}
.def-content .item a{display:inline-block;font-size:15px;width:100%;transition:.3s linear all}
.def-content .item div{height:45px;line-height:45px;width:calc(100% - 55px)}
.def-content .item .img{margin-right:10px}
.close-icon{position:absolute;font-size:25px;top:0;padding:15px;left:0;width:60px;height:60px;line-height:1;text-align:center;color:#fff;background:#464fff;border-radius:100%;transition:.2s all;transform:rotate(0);cursor:pointer}
.close-icon.unsee{transform:rotate(180deg)}
.pregan{position:absolute;width:100%;height:100%;left:0;top:0;background:#feb653;z-index:-2;border-radius:100%;animation:zoomzoom 3s linear .2s infinite}
.item svg{fill:#fec576}
.def-content .item svg{fill:#fff}
.def-content .img{width:45px;height:45px;padding:10px;border-radius:100%;cursor:pointer;transition:.3s linear all .0s}
.def-content .item:hover{box-shadow:0 0 5px -1px #000}
.def-content .item:hover a{color:red}
.def-content .item:hover .img{transition-delay:.3s;box-shadow:0 0 5px 0 #333}
@keyframes zoomzoom{from{transform:scale(0)}to{transform:scale(1.2)}}
.pregan:nth-child(1){animation-delay:.5s}
.def-content .item.phone .img{background:#4eb625}
.def-content .item.skype .img{background:#24a6cd}
.def-content .item.zalo .img{background:#3B5998}
.def-content .item.messenger .img{background:#2c01ff}
.def-content .item.mail .img{background:#d5493c}
</style>
<div class="main-widget">
  <div class="def-content unsee element">
    <div class="item phone">
      <a href="tel:0123456789">
        <span class="img">
          <svg id="svg_phone_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="" xml:space="preserve">
            <path d="M498.808,377.784l-63.633-63.647c-16.978-16.978-46.641-17.007-63.647,0l-10.611,10.611l127.284,127.277l10.607-10.607    C516.427,423.798,516.368,395.314,498.808,377.784z" />
            <path d="M339.116,345.37c-13.39,10.373-32.492,9.959-44.727-2.303L168.572,217.163c-12.263-12.263-12.676-31.379-2.303-44.736    L39.278,45.443c-54.631,63.68-52.495,159.633,7.8,219.928l199.103,199.19c57.86,57.858,152.635,65.532,219.932,7.797    L339.116,345.37z" />
            <path d="M197.503,76.391L133.87,12.744c-16.978-16.978-46.641-17.007-63.647,0L59.612,23.355l127.284,127.277l10.607-10.608    C215.121,122.406,215.063,93.922,197.503,76.391z" />
          </svg>
        </span>
        <div class="detail">0123 456 789</div>
      </a>
    </div>
    <div class="item zalo">
      <a target="_blank" href="https://zalo.me/0123456789">
        <span class="img">
          <svg id="svg_zalo_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 614.501 613.667" xml:space="preserve">
            <path d="M464.721,301.399c-13.984-0.014-23.707,11.478-23.944,28.312c-0.251,17.771,9.168,29.208,24.037,29.202   c14.287-0.007,23.799-11.095,24.01-27.995C489.028,313.536,479.127,301.399,464.721,301.399z" />
            <path d="M291.83,301.392c-14.473-0.316-24.578,11.603-24.604,29.024c-0.02,16.959,9.294,28.259,23.496,28.502   c15.072,0.251,24.592-10.87,24.539-28.707C315.214,313.318,305.769,301.696,291.83,301.392z" />
            <path d="M310.518,3.158C143.102,3.158,7.375,138.884,7.375,306.3s135.727,303.142,303.143,303.142   c167.415,0,303.143-135.727,303.143-303.142S477.933,3.158,310.518,3.158z M217.858,391.083   c-33.364,0.818-66.828,1.353-100.133-0.343c-21.326-1.095-27.652-18.647-14.248-36.583c21.55-28.826,43.886-57.065,65.792-85.621   c2.546-3.305,6.214-5.996,7.15-12.705c-16.609,0-32.784,0.04-48.958-0.013c-19.195-0.066-28.278-5.805-28.14-17.652   c0.132-11.768,9.175-17.329,28.397-17.348c25.159-0.026,50.324-0.06,75.476,0.026c9.637,0.033,19.604,0.105,25.304,9.789   c6.22,10.561,0.284,19.512-5.646,27.454c-21.26,28.497-43.015,56.624-64.559,84.902c-2.599,3.41-5.119,6.88-9.453,12.725   c23.424,0,44.123-0.053,64.816,0.026c8.674,0.026,16.662,1.873,19.941,11.267C237.892,379.329,231.368,390.752,217.858,391.083z    M350.854,330.211c0,13.417-0.093,26.841,0.039,40.265c0.073,7.599-2.599,13.647-9.512,17.084   c-7.296,3.642-14.71,3.028-20.304-2.968c-3.997-4.281-6.214-3.213-10.488-0.422c-17.955,11.728-39.908,9.96-56.597-3.866   c-29.928-24.789-30.026-74.803-0.211-99.776c16.194-13.562,39.592-15.462,56.709-4.143c3.951,2.619,6.201,4.815,10.396-0.053   c5.39-6.267,13.055-6.761,20.271-3.357c7.454,3.509,9.935,10.165,9.776,18.265C350.67,304.222,350.86,317.217,350.854,330.211z    M395.617,369.579c-0.118,12.837-6.398,19.783-17.196,19.908c-10.779,0.132-17.593-6.966-17.646-19.512   c-0.179-43.352-0.185-86.696,0.007-130.041c0.059-12.256,7.302-19.921,17.896-19.222c11.425,0.752,16.992,7.448,16.992,18.833   c0,22.104,0,44.216,0,66.327C395.677,327.105,395.828,348.345,395.617,369.579z M463.981,391.868   c-34.399-0.336-59.037-26.444-58.786-62.289c0.251-35.66,25.304-60.713,60.383-60.396c34.631,0.304,59.374,26.306,58.998,61.986   C524.207,366.492,498.534,392.205,463.981,391.868z" />
          </svg>
        </span>
        <div class="detail">Zalo: 0123 456 789</div>
      </a>
    </div>
  </div>
  <div class="out-circle">
    <div class="pregan element"></div>
    <div class="pregan element"></div>
    <div class="main-icon">
      <svg id="svg_icon_main" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="612px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
        <path d="M401.625,325.125h-191.25c-10.557,0-19.125,8.568-19.125,19.125s8.568,19.125,19.125,19.125h191.25     c10.557,0,19.125-8.568,19.125-19.125S412.182,325.125,401.625,325.125z M439.875,210.375h-267.75     c-10.557,0-19.125,8.568-19.125,19.125s8.568,19.125,19.125,19.125h267.75c10.557,0,19.125-8.568,19.125-19.125     S450.432,210.375,439.875,210.375z M306,0C137.012,0,0,119.875,0,267.75c0,84.514,44.848,159.751,114.75,208.826V612     l134.047-81.339c18.552,3.061,37.638,4.839,57.203,4.839c169.008,0,306-119.875,306-267.75C612,119.875,475.008,0,306,0z      M306,497.25c-22.338,0-43.911-2.601-64.643-7.019l-90.041,54.123l1.205-88.701C83.5,414.133,38.25,345.513,38.25,267.75     c0-126.741,119.875-229.5,267.75-229.5c147.875,0,267.75,102.759,267.75,229.5S453.875,497.25,306,497.25z" />
      </svg>
    </div>
    <div class="ser-icon unsee element">
      <div class="process">
        <span class="img phone item">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="" xml:space="preserve">
            <path d="M498.808,377.784l-63.633-63.647c-16.978-16.978-46.641-17.007-63.647,0l-10.611,10.611l127.284,127.277l10.607-10.607    C516.427,423.798,516.368,395.314,498.808,377.784z" />
            <path d="M339.116,345.37c-13.39,10.373-32.492,9.959-44.727-2.303L168.572,217.163c-12.263-12.263-12.676-31.379-2.303-44.736    L39.278,45.443c-54.631,63.68-52.495,159.633,7.8,219.928l199.103,199.19c57.86,57.858,152.635,65.532,219.932,7.797    L339.116,345.37z" />
            <path d="M197.503,76.391L133.87,12.744c-16.978-16.978-46.641-17.007-63.647,0L59.612,23.355l127.284,127.277l10.607-10.608    C215.121,122.406,215.063,93.922,197.503,76.391z" />
          </svg>
        </span>
        <span class="img zalo item">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 614.501 613.667" xml:space="preserve">
            <path d="M464.721,301.399c-13.984-0.014-23.707,11.478-23.944,28.312c-0.251,17.771,9.168,29.208,24.037,29.202   c14.287-0.007,23.799-11.095,24.01-27.995C489.028,313.536,479.127,301.399,464.721,301.399z" />
            <path d="M291.83,301.392c-14.473-0.316-24.578,11.603-24.604,29.024c-0.02,16.959,9.294,28.259,23.496,28.502   c15.072,0.251,24.592-10.87,24.539-28.707C315.214,313.318,305.769,301.696,291.83,301.392z" />
            <path d="M310.518,3.158C143.102,3.158,7.375,138.884,7.375,306.3s135.727,303.142,303.143,303.142   c167.415,0,303.143-135.727,303.143-303.142S477.933,3.158,310.518,3.158z M217.858,391.083   c-33.364,0.818-66.828,1.353-100.133-0.343c-21.326-1.095-27.652-18.647-14.248-36.583c21.55-28.826,43.886-57.065,65.792-85.621   c2.546-3.305,6.214-5.996,7.15-12.705c-16.609,0-32.784,0.04-48.958-0.013c-19.195-0.066-28.278-5.805-28.14-17.652   c0.132-11.768,9.175-17.329,28.397-17.348c25.159-0.026,50.324-0.06,75.476,0.026c9.637,0.033,19.604,0.105,25.304,9.789   c6.22,10.561,0.284,19.512-5.646,27.454c-21.26,28.497-43.015,56.624-64.559,84.902c-2.599,3.41-5.119,6.88-9.453,12.725   c23.424,0,44.123-0.053,64.816,0.026c8.674,0.026,16.662,1.873,19.941,11.267C237.892,379.329,231.368,390.752,217.858,391.083z    M350.854,330.211c0,13.417-0.093,26.841,0.039,40.265c0.073,7.599-2.599,13.647-9.512,17.084   c-7.296,3.642-14.71,3.028-20.304-2.968c-3.997-4.281-6.214-3.213-10.488-0.422c-17.955,11.728-39.908,9.96-56.597-3.866   c-29.928-24.789-30.026-74.803-0.211-99.776c16.194-13.562,39.592-15.462,56.709-4.143c3.951,2.619,6.201,4.815,10.396-0.053   c5.39-6.267,13.055-6.761,20.271-3.357c7.454,3.509,9.935,10.165,9.776,18.265C350.67,304.222,350.86,317.217,350.854,330.211z    M395.617,369.579c-0.118,12.837-6.398,19.783-17.196,19.908c-10.779,0.132-17.593-6.966-17.646-19.512   c-0.179-43.352-0.185-86.696,0.007-130.041c0.059-12.256,7.302-19.921,17.896-19.222c11.425,0.752,16.992,7.448,16.992,18.833   c0,22.104,0,44.216,0,66.327C395.677,327.105,395.828,348.345,395.617,369.579z M463.981,391.868   c-34.399-0.336-59.037-26.444-58.786-62.289c0.251-35.66,25.304-60.713,60.383-60.396c34.631,0.304,59.374,26.306,58.998,61.986   C524.207,366.492,498.534,392.205,463.981,391.868z" />
          </svg>
        </span>
      </div>
    </div>
    <div class="close-icon unsee element">x</div>
  </div>
</div>
<script>
  //<![CDATA[
  $(function() {
    var i = 1;
    var n = $('.ser-icon .process .item').length;
    var len = $('.ser-icon .process').width() / n;
    var pos = new WebKitCSSMatrix($('.ser-icon .process').css('transform'));
    $('.ser-icon').removeClass('unsee');

    function nextFrame() {
      if (i < n) {
        i++;
        var pos2 = new WebKitCSSMatrix($('.ser-icon .process').css('transform'));
        $('.ser-icon .process').css('transform', 'translateX(' + (pos2.m41 - len) + 'px)');
        setTimeout(nextFrame, 800);
      } else {
        $('.ser-icon').addClass('unsee');
        i = 1;
        $('.ser-icon .process').css('transform', 'translateX(' + (pos.m41) + 'px)');
        setTimeout(beginFrame, 2000);
      }
    }

    function beginFrame() {
      $('.ser-icon').removeClass('unsee');
      setTimeout(nextFrame, 900);
    }
    setTimeout(beginFrame, 2000);
    $('.close-icon').click(function(event) {
      $('.element').toggleClass('unsee');
    });
  });
  //]]>
</script>
Đá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 Tiện ích Zalo gọi điện cho blogspot
admin

admin

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

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

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í

Login
guest
guest
0 Góp ý
Inline Feedbacks
Xem tất cả các bình luận

TUT Lên Tích Xanh Facebook Miễn Phí 2023

Điều kiện để Messi có thể tham dự World Cup 2026

Khắc phục lỗi Client hết trận đấu trường chân lý

Ân sủng là gì? Sự ân sủng là gì?

Misoa là ai? Nữ MC lên tiếng “bị bạn trai tác động vật lý”

DQ là số điện thoại của ai? Vì sao gọi cho bạn?

  • 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
      • Tiktok
    • GAME
      • Game Offline
      • Game Online

    © 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