Thêm Tiện ích Zalo gọi điện cho 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

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>