0
Home  ›  Blog

Chia sẻ code ngắn tiện ích zalo liên hệ cho Blogspot

Chia sẻ đoạn code css +html cực ngắn và nhẹ thể hiện liên hệ góc phải website rung rinh gọn gàng không ảnh hưởng đến tốc độ load của site, bạn có thể tải hình ảnh về nén thêm nhé!

Copy đoạn code dưới dây sau đó chèn trước thẻ đóng </body> của website, nhớ thay sđt vào nhé ae

<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:2rem}.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.zalo>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:30px;'>
<a href='https://zalo.me/0974xxxxx' 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='zalo'><img alt='Liên hệ Zalo' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3lY_8TjwLlxDpISeQ2JYW7B06yDDtNzu8v-4E-cz-iyEIfFY9mf6-W05MepzHdMz4KJ1JdoYk5uaTWp_uUq5FAO2AzDindrNXSQfvmjqdcrGDXJgzoBkxL9WssJFgqUR-Q2loG0erb01dKVG41PzeGR8uy1DXUI4GkXCAMXET3VPUGlkCM2qcmgjSw0M/s1600/zalo.png' width='40'/></span>
</a>
Đăng nhận xét
Tìm kiếm
Menu
Chia sẻ
Additional JS