Tiện ích liên hệ cực đẹp cho theme blogger 2020

Tiện ích liên hệ cho theme blogger cũng đã được chia sẻ nhiều ở các bài viết trước của công nghệ webblog tuy nhiên hôm nay chung tôi sẽ giới thiệu thêm tới các bạn một mẫu tiện ích liên hệ mới với mong muốn các bạn sẽ có thêm nhiều lựa chọn phù hợp với website và phong cách của các bạn hơn.

Các bạn có thể tham khảo các bài viết trước:

• Tiên ích liên hệ tích hợp zalo - facebook - Mail - SMS đẹp cho blogpsot 2020
• Tổng hợp các nút gọi làm hotline đẹp cho blogspot
• Code hotline hỗ trợ trực tuyến đẹp cho blogspot

Dưới đây là cách tích hợp Tiện ích liên hệ cực đẹp cho theme blogger 2020 vào code.

Bước 1. Vào phần chủ đề --> TÙY CHỈNH (click vào mũi tên đi xuống)--> chỉnh sửa HTML --> ctrl + F bật khung tim kiếm và tìm key ]]></b:skin>

Thêm code css sau trên thẻ vừa tìm được.

/* CSS HOTLINE */
.support-online{position:fixed;z-index:999;left:15px;bottom:30px;top:auto!important}
.support-online a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px}
.support-online i{width:40px;height:40px;background:#90c908;color:#fff;border-radius:100%;font-size:20px;text-align:center;line-height:40px;position:relative;z-index:999}
.support-online a{display:block}
.support-online a span{border-radius:2px;text-align:center;background:#90c908;padding:9px;display:none;width:210px;margin-left:10px;position:absolute;color:#ffffff;z-index:999;top:0;left:40px;transition:all 0.2s ease-in-out 0s;-moz-animation:headerAnimation 0.7s 1;-webkit-animation:headerAnimation 0.7s 1;-o-animation:headerAnimation 0.7s 1;animation:headerAnimation 0.7s 1}
.support-online a:hover span{display:block}
.support-online a span::before{content:"";width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #90c908 transparent transparent;position:absolute;left:-10px;top:10px}
.kenit-alo-circle-fill{width:60px;height:60px;top:-10px;position:absolute;-webkit-transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-ms-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .1s;-moz-transition:all .1s;-o-transition:all .1s;transition:all .1s;background-color:rgba(144,201,8,0.5);opacity:.75;right:-10px}
.kenit-alo-circle{width:50px;height:50px;top:-5px;right:-5px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,0.4);opacity:.1;border-color:#a2e209;opacity:.5}
.support-online .btn-support{cursor:pointer}
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}
@keyframes pulse{0%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}
.animated{animation-duration:1s;animation-fill-mode:both}
.animated.infinite{animation-iteration-count:infinite}
.animated.hinge{animation-duration:2s}
.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut{animation-duration:.75s}
@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3,0.3,0.3)}50%{opacity:1}}
.zoomIn{animation-name:zoomIn}
@keyframes pulse{from{transform:scale3d(1,1,1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scale3d(1,1,1)}}
.pulse{animation-name:pulse}
@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(0.95,1.05,1)}75%{transform:scale3d(1.05,0.95,1)}to{transform:scale3d(1,1,1)}}
/* END CSS HOTLINE */

Bước 2: Tìm thẻ </body> hoặc &lt;!--<head/>--&gt; thêm code dưới bên trên thẻ vừa tìm được.

<div class='support-online'>
<div class='support-content' style='display: none;'>
<a class='call-now' href='tel:0123456789' rel='nofollow'>
<i aria-hidden='true' class='fa fa-phone'/>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
<span>Gọi ngay: 0123 456 789</span>
</a>
<a class='mes' href='https://www.messenger.com/t/IDFACEBOOK' target='_blank'>
<i aria-hidden='true' class='fa fa-facebook-official'/>
<span>Chat qua Messenger</span>
</a>
<a class='zalo' href='mailto:baotrung304@gmail.com' target='_blank'>
<i class='fa fa-envelope'/>
<span>baotrung304@gmail.com</span>
</a>
<a class='sms' href='sms:0123456789'>
<i aria-hidden='true' class='fa fa-wechat'/>
<span>SMS: 0123 456 789</span>
</a>
</div>
<a class='btn-support'>
<i class='fa fa-bell'/>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
</a>
</div>
<script type='text/javascript'>
//<![CDATA[
$('a.btn-support').click(function(e){e.stopPropagation();$('.support-content').slideToggle()});$('.support-content').click(function(e){e.stopPropagation()});$(document).click(function(){$('.support-content').slideUp()});
//]]>
</script>

Thay các thông tin in đỏ thành thông tin của bạn. lần lượt là số điện thoại của bạn, ID của facebook (hoặc fan page) của bạn, mail của bạn, và số điện thoại nhận SMS.

Các bạn cũng có thể chỉnh tông mầu bằng các thay #90c908 thành tông mầu bạn muốn.

Lưu ý : Với các bạn không mua theme blogspot tại www.congnghewebblog.com thì các bạn tìm <b:skin thêm code này ngay trên thẻ vừa tìm được,

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Bước 3: Lưu lại và tận hưởng thành quả.

Trên đây là hướng dẫn tích hợp tiện ích liên hệ mới đẹp nhẹ có đầy đủ facebook, zalo, sms, nút gọi, mail vào theme blogger cho các bạn. Nếu cần hỗ trợ gì các bạn để lại comment chúng tôi sẽ giải đáp thắc mắc cho các bạn nha.