Thêm một Tiện ích liên hệ zalo gọi điện cho trang web hoặc blogspot, tiện ích hiển thị đẹp bao gồm zalo, messenger, gọi điện và maps.
Blogspot của bạn đang bán hàng hoặc làm dịch vụ thì việc thêm vào blog một tiện ích liên hệ sẽ giúp cho khách hàng liên hệ với bạn một cách dễ dàng và nhanh chóng nhất.
Cách cài đặt đơn giản là bạn chỉ cần copy đoạn code dưới dán trước dòng thẻ đóng </boby> và lưu lại là xong.
<div class='header-overlay' style='background: rgba(0, 0, 0, 0.53);'></div>
<style>
/*<![CDATA[*/
.header-overlay{visibility:hidden;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.53);z-index:30;opacity:0;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s}
.header-overlay.active{visibility:visible;opacity:1}
.icon-cps,.icon-dtv,[class*=icon-cps-]{display:inline-block;vertical-align:middle;background-image:url(https://cdn.jsdelivr.net/gh/giaodienblog/cdn@0177fc6/icons_menubar.svg)!important;background-repeat:no-repeat;background-size:500px}
.icon-cps-fab-menu{width:50px;height:50px;margin:0 5px 5px 0;background-size:850px;background-position:-794px -374px}
.icon-cps-chat-zalo{width:30px;height:30px;background-size:600px;background-position:-450px -265px}
.icon-cps-chat{width:30px;height:30px;background:url("https://cdn.jsdelivr.net/gh/giaodienblog/img@3b4b840/messenger.svg") center center no-repeat!important;background-size:25px!important}
.icon-cps-phone{width:28px;height:28px;background-position:-139px -262px}
.icon-cps-local{width:28px;height:28px;background-position:-92.5px -262px}
.fab-wrapper{position:fixed;bottom:30px;right:16px;z-index:9999999}
#fabCheckbox{display:none}
.fab{width:60px;max-width:unset;height:60px;display:flex;justify-content:center;align-items:center;margin:0;border-radius:50%;background:#24c466;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);position:absolute;right:10px;bottom:10px;z-index:1000;overflow:hidden;transform:rotate(0deg);-webkit-transition:all 0.15s cubic-bezier(0.15,0.87,0.45,1.23);transition:all 0.15s cubic-bezier(0.15,0.87,0.45,1.23)}
.fab-checkbox:checked ~ .fab{transform:rotate(90deg);-webkit-transition:all 0.15s cubic-bezier(0.15,0.87,0.45,1.23);transition:all 0.15s cubic-bezier(0.15,0.87,0.45,1.23)}
.fab-checkbox:checked ~ .fab .icon-cps-fab-menu{width:66px;height:66px;margin:0;background-size:613px;background-position:-331.5px -306.5px}
.fab-wheel{width:300px;height:220px;position:absolute;bottom:15px;right:15px;transform:scale(0);transform-origin:bottom right;transition:all .3s ease}
.fab-checkbox:checked ~ .fab-wheel{transform:scale(1)}
.fab-wheel .fab-action{display:flex;align-items:center;font-size:14px;font-weight:700;color:#fff;position:absolute;text-decoration:none}
.fab-wheel .fab-action-1{top:0;right:0}
.fab-wheel .fab-action-2{top:45px;left:85px}
.fab-wheel .fab-action-3{left:20px;bottom:70px}
.fab-wheel .fab-action-4{left:0;bottom:0}
.fab-title{float:left;margin:0 5px 0 0;opacity:0}
.fab-checkbox:checked ~ .fab-wheel .fab-title{opacity:1}
.fab-button{width:45px;height:45px;display:flex;justify-content:center;align-items:center;float:left;padding:4px;border-radius:50%;background:#0f1941;box-shadow:0 1px 3px rgba(0,0,0,0.012),0 1px 2px rgba(0,0,0,0.24);font-size:24px;color:White;transition:all 1s ease;overflow:hidden}
.fab-wheel .fab-button-1{background:#dd5145}
.fab-wheel .fab-button-2{background:#fb0}
.fab-wheel .fab-button-3{background:#2196f3}
.fab-wheel .fab-button-4{background:#2f82fc}
/*]]>*/
</style>
<div class='header-overlay' style='background: rgba(0, 0, 0, 0.53);'></div>
<div class='fab-wrapper'>
<input class='fab-checkbox' id='fabCheckbox' type='checkbox'/>
<label class='fab' for='fabCheckbox'>
<i class='icon-cps-fab-menu'></i>
</label>
<div class='fab-wheel'>
<a class='fab-action fab-action-1' href='#' target='_blank'>
<span class='fab-title'>Tìm cửa hàng</span>
<div class='fab-button fab-button-1'><i class='icon-cps-local'></i></div>
</a>
<a class='fab-action fab-action-2' href='tel:0971539681'>
<span class='fab-title'>Gọi miễn phí</span>
<div class='fab-button fab-button-2'><i class='icon-cps-phone'></i></div>
</a>
<a class='fab-action fab-action-3' href='https://m.me/105857857959855' target='_blank'>
<span class='fab-title'>Chat Facebook</span>
<div class='fab-button fab-button-3'><i class='icon-cps-chat'></i></div>
</a>
<a class='fab-action fab-action-4' href='https://zalo.me/0971539681' target='_blank'>
<span class='fab-title'>Chat trên Zalo</span>
<div class='fab-button fab-button-4'><i class='icon-cps-chat-zalo'></i></div>
</a>
</div>
</div>
<script>
//<![CDATA[
window.addEventListener("load", function() {
$('.fab').click(function() {
$('.header-overlay').toggleClass('active');
})
});
//]]>
</script>
Nếu bạn cần hỗ trợ thì hãy để lại nhận xét ở dưới bài viết này.
Kết luận: Trên đây là bài viết hướng dẫn cách tạo nút Tiện ích liên hệ đẹp cho blogspot.
Bài viết: Tiện ích liên hệ zalo gọi điện được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.
Nhận xét
Đăng nhận xét