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)}
Also Read :Hướng dẫn Phân trang bài viết blogspot.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.