Lưu ý: Bạn hãy đọc thật kỹ bài viết trước khi thực hiện nhé ! Nếu như trong quá trình sử dụng bạn gặp bất cứ lỗi gì, ví dụ như bị lỗi link download, blog load chậm, hay là không truy cập vào được một trang nào đó... thì bạn vui lòng thông báo với mình tại đây nhé. Thanks !

Nhatthienkt - Code liên hệ nhanh phát triển bởi traidatmui, thấy đẹp nên mình chia sẻ lại cho những ai thích.

Để thực hiện các bạn chèn các đoạn code sau vào trong theme
Chia sẻ code liên hệ nhanh tuyệt đẹp cho blogspot

1. Chèn CSS

Chèn code sau trên thẻ ]]></b:skin>


.quick-alo-phone.quick-alo-static {
  opacity:.6;
}
.quick-alo-phone.quick-alo-hover,
.quick-alo-phone:hover {
  opacity:1;
}
.quick-alo-ph-circle {
  width:160px;
  height:160px;
  top:20px;
  left:20px;
  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);
  border:2px solid #bfebfc 9;
  opacity:.1;
  -webkit-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
  -moz-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
  -ms-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
  -o-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
  animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s;
  transition:all .5s;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle {
  -webkit-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
  animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle {
  -webkit-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
  animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone:hover .quick-alo-ph-circle {
  border-color:#00aff2;
  opacity:.5;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle {
  border-color:#75eb50;
  border-color:#baf5a7 9;
  opacity:.5;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle {
  border-color:#00aff2;
  border-color:#bfebfc 9;
  opacity:.5;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle {
  border-color:#ccc;
  opacity:.5;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle {
  border-color:#75eb50;
  opacity:.5;
}
.quick-alo-ph-circle-fill {
  width:100px;
  height:100px;
  top:50px;
  left:50px;
  position:absolute;
  background-color:#000;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:2px solid transparent;
  opacity:.1;
  -webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s;
  transition:all .5s;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle-fill {
  -webkit-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
  animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle-fill {
  -webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
  animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
  opacity:0 !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone:hover .quick-alo-ph-circle-fill {
  background-color:rgba(0,175,242,0.5);
  background-color:#00aff2 9;
  opacity:.75 !important;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle-fill {
  background-color:rgba(117,235,80,0.5);
  background-color:#baf5a7 9;
  opacity:.75 !important;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle-fill {
  background-color:rgba(0,175,242,0.5);
  background-color:#a6e3fa 9;
  opacity:.75 !important;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle-fill {
  background-color:rgba(204,204,204,0.5);
  background-color:#ccc 9;
  opacity:.75 !important;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle-fill {
  background-color:rgba(117,235,80,0.5);
  opacity:.75 !important;
}
.quick-alo-ph-img-circle {
  width:60px;
  height:60px;
  top:70px;
  left:70px;
  position:absolute;
  background:rgba(30,30,30,0.1) url("http://i.imgur.com/YWJeVO2.png") no-repeat center center;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:2px solid transparent;
  opacity:.7;
  -webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
  -moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
  -ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
  -o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
  animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-img-circle {
  -webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
  animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-img-circle {
  -webkit-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
  animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone:hover .quick-alo-ph-img-circle {
  background-color:#00aff2;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle {
  background-color:#75eb50;
  background-color:#75eb50 9;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle {
  background-color:#00aff2;
  background-color:#00aff2 9;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-img-circle {
  background-color:#ccc;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-img-circle {
  background-color:#75eb50;
}
@-moz-keyframes quick-alo-circle-anim {
  0% {
    -moz-transform:rotate(0) scale(.5) skew(1deg);
    opacity:.1;
    -moz-opacity:.1;
    -webkit-opacity:.1;
    -o-opacity:.1;
  }
  30% {
    -moz-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.5;
    -moz-opacity:.5;
    -webkit-opacity:.5;
    -o-opacity:.5;
  }
  100% {
    -moz-transform:rotate(0) scale(1) skew(1deg);
    opacity:.6;
    -moz-opacity:.6;
    -webkit-opacity:.6;
    -o-opacity:.1;
  }
}
@-webkit-keyframes quick-alo-circle-anim {
  0% {
    -webkit-transform:rotate(0) scale(.5) skew(1deg);
    -webkit-opacity:.1;
  }
  30% {
    -webkit-transform:rotate(0) scale(.7) skew(1deg);
    -webkit-opacity:.5;
  }
  100% {
    -webkit-transform:rotate(0) scale(1) skew(1deg);
    -webkit-opacity:.1;
  }
}
@-o-keyframes quick-alo-circle-anim {
  0% {
    -o-transform:rotate(0) kscale(.5) skew(1deg);
    -o-opacity:.1;
  }
  30% {
    -o-transform:rotate(0) scale(.7) skew(1deg);
    -o-opacity:.5;
  }
  100% {
    -o-transform:rotate(0) scale(1) skew(1deg);
    -o-opacity:.1;
  }
}
@-moz-keyframes quick-alo-circle-fill-anim {
  0% {
    -moz-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
  50% {
    -moz-transform:rotate(0) -moz-scale(1) skew(1deg);
    opacity:.2;
  }
  100% {
    -moz-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
}
@-webkit-keyframes quick-alo-circle-fill-anim {
  0% {
    -webkit-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
  50% {
    -webkit-transform:rotate(0) scale(1) skew(1deg);
    opacity:.2;
  }
  100% {
    -webkit-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
}
@-o-keyframes quick-alo-circle-fill-anim {
  0% {
    -o-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
  50% {
    -o-transform:rotate(0) scale(1) skew(1deg);
    opacity:.2;
  }
  100% {
    -o-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
}
@-moz-keyframes quick-alo-circle-img-anim {
  0% {
    transform:rotate(0) scale(1) skew(1deg);
  }
  10% {
    -moz-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -moz-transform:rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -moz-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -moz-transform:rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -moz-transform:rotate(0) scale(1) skew(1deg);
  }
  100% {
    -moz-transform:rotate(0) scale(1) skew(1deg);
  }
}
@-webkit-keyframes quick-alo-circle-img-anim {
  0% {
    -webkit-transform:rotate(0) scale(1) skew(1deg);
  }
  10% {
    -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -webkit-transform:rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -webkit-transform:rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -webkit-transform:rotate(0) scale(1) skew(1deg);
  }
  100% {
    -webkit-transform:rotate(0) scale(1) skew(1deg);
  }
}
@-o-keyframes quick-alo-circle-img-anim {
  0% {
    -o-transform:rotate(0) scale(1) skew(1deg);
  }
  10% {
    -o-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -o-transform:rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -o-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -o-transform:rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -o-transform:rotate(0) scale(1) skew(1deg);
  }
  100% {
    -o-transform:rotate(0) scale(1) skew(1deg);
  }
}
.quick-alo-phone {
    position: fixed;
    background-color: transparent;
    width: 200px;
    height: 200px;
    cursor: pointer;
    z-index: 200000 !important;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transition: visibility .5s;
    -moz-transition: visibility .5s;
    -o-transition: visibility .5s;
    transition: visibility .5s;
    right: 150px;
    top: 30px;
}

2. Chèn file .js sau thẻ <head>

<script async="async" src="http://data-traidatmui.appspot.com/scripts/hover_textcolor.js" type="text/javascript">

3. Chèn thông tin liên hệ trước thẻ  </body>

<div class='quick-alo-phone quick-alo-green quick-alo-show' id='quick-alo-phoneIcon' style='right: 10px; top: 20%;'>
  <a href='https://web.facebook.com/nhatthienktblog' target='_blank' title='Liên hệ nhanh'>
  <div class='quick-alo-ph-circle'/>
  <div class='quick-alo-ph-circle-fill'/>
  <div class='quick-alo-ph-img-circle'/>
  </a>
</div>

  • Thay nick facebook nhatthienktblog thành của bạn.
  • right: 10px; Hiện thị bên trái thì thay Right  thành Left

Chúc các bạn thành công.
Copy bài viết vui lòng ghi Nguồn: NhatThienkt.net
Điểm 4.6/5 dựa vào 87 đánh giá
- - 2 bình luận
http://www.nhatthienkt.net/2017/05/chia-se-code-lien-he-nhanh-tuyet-ep-cho.html
  • Google Comment (2)
  • Facebook Comment (0)
  1. Trả lời
    1. Theme này không chia sẻ, tuy nhiên nếu bạn thích thì liên hệ mình qua https://www.facebook.com/nhatthienktblog

      Xóa

Một số lưu ý khi bình luận

Vui lòng viết comment Tiếng Việt có dấu.

Bạn có thể gửi mail trực tiếp qua địa chỉ: nhatthienkt.s@gmail.com

Lưu ý những nhận xét với mục đích backlink không liên quan đến nội dung bài viết sẽ bị xóa bỏ


Chia sẻ kinh nghiệm công tác văn phòng, Kế toán