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>
Đánh giá bài viết
[Total: 1 Average: 5]