Share Code tạo nút liên hệ Zalo
các bạn chỉ cần copy dán trước thẻ đóng </body> hoặc một số template là <!--</body>--></body>
<style>
/*<![CDATA[*/
.zalo-container{position:fixed;width:40px;height:40px;bottom:160px;z-index:9999999}
.zalo-container:not(.right){left:2.5rem}
.zalo-container.right{right:2.5rem}
.zalo-container a{display:block;cursor: pointer;}
.zalo-container span{display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-ms-align-items:center;align-items:center;width:40px;height:40px;border-radius:50%;background:#1182FC;position:relative}
@keyframes zoomIn_zalo{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.zoomIn_zalo{animation-name:zoomIn_zalo}
.animated_zalo{animation-duration:1s;animation-fill-mode:both}
.animated_zalo.infinite{animation-iteration-count:infinite}
.cmoz-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(17,130,252,.8);opacity:.1;border-color:#1182FC;opacity:.5}
.cmoz-alo-circle-fill{width:60px;height:60px;top:-10px;position:absolute;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:rgba(17,130,252,0.45);opacity:.75;right:-10px}
@-webkit-keyframes pulse_zalo{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes pulse_zalo{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.pulse_zalo{-webkit-animation-name:pulse_zalo;animation-name:pulse_zalo}
span.hoatranblogger>img{max-width:100%;height:auto;display:inline-block;vertical-align:middle;transition:opacity 1s;opacity:1}
.img-shine{overflow:hidden;position:relative}
.img-shine:before{position:absolute;content:"";top:0;left:-75%;z-index:100;width:50%;height:100%;background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 100%);transform:skewX(-25deg)}
.img-shine:hover:before{animation:imgShine .75s ease-in-out}
@-webkit-keyframes imgShine{100%{left:125%}}
@-moz-keyframes imgShine{100%{left:125%}}
@keyframes imgShine{100%{left:125%}}
.img-shine{overflow:hidden;position:relative}
/*]]>*/
</style>
<div class='zalo-container right' style='bottom:40px;'>
<a id='zalo-btn' rel='noopener noreferrer nofollow' target='_blank'>
<div class='animated_zalo infinite zoomIn_zalo cmoz-alo-circle'/>
<div class='animated_zalo infinite pulse_zalo cmoz-alo-circle-fill'/>
<span class='hoatranblogger'><img alt='Contact Me on Zalo' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIF0VT2vCDlKnVq0KCuUdvoTdLC4wMP-WvNPfo7rnx-EsNJFix1DWRNnc4SsuHRNtUWBqEcChq3QYFvpEmn0ls3YNn-9VihPXRl-QhcntpG3ce5uoCFyhI6wU5HcAWvkyp4XdR3EgvIQ/s640/zalo.png' width='40'/></span>
</a>
</div>
<script>
//<![CDATA[
var phone = "053640169";
var app = "riodiamu9r6v";
function isMobileDevice(){return/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}const nutzalo=document.getElementById("zalo-btn");function ZaloClick(){let e;e=isMobileDevice()?navigator.userAgent.includes("Android")?"https://zaloapp.com/qr/p/"+app:"zalo://qr/p/"+app:"zalo://conversation?phone="+phone,window.open(e,"_blank")}nutzalo.addEventListener("click",ZaloClick);
//]]>
</script>
Lưu ý: Sửa lại số điện thoại và mã app, để lấy mã app các bạn dùng điện thoại để quét mã QR Zalo của bạn, ID chính là mã phía sau link quét được.