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

Zalo 0971539681 Tư vấn & Hỗ trợ
Chia sẻ code 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ự.

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ận xét

×

Tổng hợp kho giao diện blogspot đẹp chuẩn seo chuẩn mobile

Kho giao diện blogspot được thiết kế đẹp hiện đại tối ưu seo, thiết kế chuẩn mobile responsive, mẫu blogspot đa dạng phong phú nhiều mẫu mẫ được cập nhật và update liên tục

Nhiều theme blogger được thiết kế đẹp bởi Giaodien.blog chuẩn seo, và nhiều template blogspot miễn phí như bán hàng, bất động sản, landing page, dịch vụ, công ty

Nhiều Mẫu Blogger Cao cấp và Miễn phí Tốt nhất năm 2021. Chúng tôi tạo các Mẫu Blogger Chuyên nghiệp, Chất lượng Cao, Tối ưu hóa SEO và tốc độ load nhanh nhất. Cung cấp, tổng hợp và hỗ trợ miễn phí những template blogspot cực đẹp, template chuẩn SEO, thiết kế responsive dành cho Blogspot. Trang chia sẻ, download giao diện blogspot chuyên nghiệp, chuẩn seo, load trang nhanh và hoàn toàn miễn phí.

Mẫu template blogspot bán hàng đẹp được chia sẻ miễn phí, mẫu blogspot bán hàng thiết kế ... share template bán hàng cho blogspot, share theme blogger bán hàng.

Chúng tôi chuyên bán các mẫu giao diện blogger bán hàng, và thiết kế blogspot theo yêu cầu, giá cả phải chăng. Template được thiết kế đẹp nhất, không có lỗi vặt, bạn hoàn toàn xứng đáng với số tiền bỏ ra khi mua một template blogspot đẹp seo hiện đại

Theme blogger bán hàng thiết kế luôn luôn được tích hợp giỏ hàng, và nhiều mẫu thiết kế dành cho tiếp thị liên kết trên nền blogspot

Template blogspot tiếp thị liên kết được tối ưu seo giúp bạn có thể làm tiếp thị liên kết trực tiếp trên blogger blogspot, nhiều mẫu tiếp thị đẹp, tài chính, vay tiền blogspot

Template blogspot dự án bất động sản đẹp chuẩn seo hiện đại phù hợp làm website bất động sản bằng blogspot như dự án chung cư, nhà đất, biệt thự, công ty du lịch, theme blogspot bất động sản được thiết kế chuẩn seo responsive trên mobile ipad

Mẫu blogspot bất động sản đẹp

Giao diện blogspot thiết kế đẹp hiện đại tối ưu seo, khi mua các bạn được mình hỗ trợ cài đặt hoàn chỉnh, hỗ trợ trong quá trình sử dụng, được nhận bản nâng cấp miễn phí

Điểm nổi bật của template do mình thiết kế đó là:

Luôn luôn chuẩn seo

Luôn luôn có bố cục giúp bạn thao tác cài đặt dễ dàng và nhanh chóng

Đăng bài tự do soạn thảo, kết hợp với liên kết đính kèm

Vì vậy bạn mua template blogspot thì hãy liên hệ với mình nhận được hỗ trợ nhé, đảm bảo uy tín chất lượng về template blogspot bạn đãm mua

Blogspot là gì?

Blogspot là một nền tảng miễn phí cho phép bạn tạo trang blog miễn phí, có thể tọa các trang blogspot bán hàng, blogspot bất động sản, blogspot landing page với các mẫu giao diện blogspot có sẵn ở trang của mình là Giaodien.blog

Giao diện thiết kế chuẩn seo, chuẩn responsive trên mobile và ipad