5

Code tạo nút liên hệ Zalo

Tác giả: Hòa Trần Blogger - đăng vào tháng 10 31, 2011

Hiện tại một số trường hợp là không thể tạo nút chat zalo cho website hoặc blogspot. 


Code tạo nút liên hệ Zalo

Khi liên hệ với đội ngũ bên Zalo thì được giải thích như hình dưới.

Code tạo nút liên hệ Zalo

Và đây là 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à  &lt;!--</body>--&gt;&lt;/body&gt;


<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 = "0971539681";

  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.
Đừng bỏ lỡ.
Hổ trợ 24/7

Đừng ngừng ngại liên hệ chúng tôi, hổ trợ 24/7. Hotline: 097 1539 681

alt
alt