Tạo nút liên hệ Zalo hiệu ứng rung lắc cho website Blogspot, cách cài đặt đơn giản chỉ cần copy toàn bộ code bên dưới dán trước thẻ đóng </body> hoặc dán dưới thẻ <body> và lưu lại là xong.
Toàn bộ code bao gồm HTML và CSS
<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}.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 href='https://zalo.me/0971539681' id='zalo-btn' rel='noopener noreferrer nofollow' target='_blank'><div class='animated_zalo infinite zoomIn_zalo cmoz-alo-circle'></div><div class='animated_zalo infinite pulse_zalo cmoz-alo-circle-fill'></div><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>
Bài viết: Nút liên hệ Zalo cho blogspot đượ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.