Share Code Thêm Nút Điện Thoại Cho Blog

 SHARE CODE THÊM NÚT CONTACT 

Tiếp tục chuyên mục Thủ Thuật Blogger sẽ là bài viết hướng dẫn thêm nút điện thoại liên lạc cho blog. Không
nói nhiều chúng ta đến với phần nội dung nhớ. 

Share Code Thêm Nút Điện Thoại Cho Blog

HƯỚNG DẪN:

BƯỚC 1:

Coppy toàn bộ đoạn code dưới đây:

<style>
  .phonering-alo-phone {
    position:fixed;
    visibility:hidden;
    background-color:transparent;
    width:200px;
    height:200px;
    cursor:pointer;
    z-index:200000!important;
    bottom:-40px;
    left:-40px;
    display:block;
    -webkit-backface-visibility:hidden;
    -webkit-transform:translateZ(0);
    transition:visibility .5s;
  }
  .phonering-alo-phone.phonering-alo-show {
    visibility:visible}
  .phonering-alo-phone.phonering-alo-static {
    opacity:.6}
  .phonering-alo-phone.phonering-alo-hover,.phonering-alo-phone:hover {
    opacity:1}
  .phonering-alo-ph-circle {
    width:160px;
    height:160px;
    top:20px;
    left:20px;
    position:absolute;
    background-color:transparent;
    border-radius:100%;
    border:2px solid rgba(30,30,30,0.4);
    opacity:.1;
    -webkit-animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;
    animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;
    transition:all .5s;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%
  }
  .phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle {
    -webkit-animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important;
    animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important
  }
  .phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle {
    -webkit-animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important;
    animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important
  }
  .phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone:hover .phonering-alo-ph-circle {
    border-color:#00aff2;
    opacity:.5
  }
  .phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle {
    border-color:#272d6b;
    opacity:.5
  }
  .phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {
    border-color:#00aff2;
    opacity:.5
  }
  .phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle {
    border-color:#ccc;
    opacity:.5
  }
  .phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle {
    border-color:#75eb50;
    opacity:.5
  }
  .phonering-alo-ph-circle-fill {
    width:100px;
    height:100px;
    top:50px;
    left:50px;
    position:absolute;
    background-color:#000;
    border-radius:100%;
    border:2px solid transparent;
    -webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    transition:all .5s;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%
  }
  .phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle-fill {
    -webkit-animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important;
    animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important
  }
  .phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle-fill {
    -webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
    animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
    opacity:0!important
  }
  .phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(39,45,107,0.5);
    opacity:.75!important
  }
  .phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(39,45,107,0.5);
    opacity:.75!important
  }
  .phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill {
    background-color:rgba(0,175,242,0.5);
  }
  .phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(204,204,204,0.5);
    opacity:.75!important
  }
  .phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle-fill {
    background-color:rgba(117,235,80,0.5);
    opacity:.75!important
  }
  .phonering-alo-ph-img-circle {
    width:60px;
    height:60px;
    top:70px;
    left:70px;
    position:absolute;
    background:rgba(30,30,30,0.1) url(https://imgur.com/A90P0Do.png) no-repeat center center;
    border-radius:100%;
    border:2px solid transparent;
    -webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%
  }
  .phonering-alo-phone.phonering-alo-active .phonering-alo-ph-img-circle {
    -webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important;
    animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important
  }
  .phonering-alo-phone.phonering-alo-static .phonering-alo-ph-img-circle {
    -webkit-animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important;
    animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important
  }
  .phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone:hover .phonering-alo-ph-img-circle {
    background-color:#00aff2;
  }
  .phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-img-circle {
    background-color:#272d6b;
  }
  .phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {
    background-color:#00aff2;
  }
  .phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-img-circle {
    background-color:#ccc;
  }
  .phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-img-circle {
    background-color:#75eb50
  }
  @-webkit-keyframes phonering-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
    }
  }
  @-webkit-keyframes phonering-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
    }
  }
  @-webkit-keyframes phonering-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)
    }
  }
  @-webkit-keyframes phonering-alo-circle-anim {
    0% {
      -webkit-transform:rotate(0) scale(.5) skew(1deg);
      transform:rotate(0) scale(.5) skew(1deg);
      opacity:.1
    }
    30% {
      -webkit-transform:rotate(0) scale(.7) skew(1deg);
      transform:rotate(0) scale(.7) skew(1deg);
      opacity:.5
    }
    100% {
      -webkit-transform:rotate(0) scale(1) skew(1deg);
      transform:rotate(0) scale(1) skew(1deg);
      opacity:.1
    }
  }
  @keyframes phonering-alo-circle-anim {
    0% {
      -webkit-transform:rotate(0) scale(.5) skew(1deg);
      transform:rotate(0) scale(.5) skew(1deg);
      opacity:.1
    }
    30% {
      -webkit-transform:rotate(0) scale(.7) skew(1deg);
      transform:rotate(0) scale(.7) skew(1deg);
      opacity:.5
    }
    100% {
      -webkit-transform:rotate(0) scale(1) skew(1deg);
      transform:rotate(0) scale(1) skew(1deg);
      opacity:.1
    }
  }
  @-webkit-keyframes phonering-alo-circle-fill-anim {
    0% {
      -webkit-transform:rotate(0) scale(.7) skew(1deg);
      transform:rotate(0) scale(.7) skew(1deg);
      opacity:.2
    }
    50% {
      -webkit-transform:rotate(0) scale(1) skew(1deg);
      transform:rotate(0) scale(1) skew(1deg);
      opacity:.2
    }
    100% {
      -webkit-transform:rotate(0) scale(.7) skew(1deg);
      transform:rotate(0) scale(.7) skew(1deg);
      opacity:.2
    }
  }
  @keyframes phonering-alo-circle-fill-anim {
    0% {
      -webkit-transform:rotate(0) scale(.7) skew(1deg);
      transform:rotate(0) scale(.7) skew(1deg);
      opacity:.2
    }
    50% {
      -webkit-transform:rotate(0) scale(1) skew(1deg);
      transform:rotate(0) scale(1) skew(1deg);
      opacity:.2
    }
    100% {
      -webkit-transform:rotate(0) scale(.7) skew(1deg);
      transform:rotate(0) scale(.7) skew(1deg);
      opacity:.2
    }
  }
  @-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
      -webkit-transform:rotate(0) scale(1) skew(1deg);
      transform:rotate(0) scale(1) skew(1deg)
    }
    10% {
      -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
      transform:rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
      -webkit-transform:rotate(25deg) scale(1) skew(1deg);
      transform:rotate(25deg) scale(1) skew(1deg)
    }
    30% {
      -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
      transform:rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
      -webkit-transform:rotate(25deg) scale(1) skew(1deg);
      transform:rotate(25deg) scale(1) skew(1deg)
    }
    50% {
      -webkit-transform:rotate(0) scale(1) skew(1deg);
      transform:rotate(0) scale(1) skew(1deg)
    }
    100% {
      -webkit-transform:rotate(0) scale(1) skew(1deg);
      transform:rotate(0) scale(1) skew(1deg)
    }
  }
  @keyframes phonering-alo-circle-img-anim {
    0% {
      -webkit-transform:rotate(0) scale(1) skew(1deg);
      transform:rotate(0) scale(1) skew(1deg)
    }
    10% {
      -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
      transform:rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
      -webkit-transform:rotate(25deg) scale(1) skew(1deg);
      transform:rotate(25deg) scale(1) skew(1deg)
    }
    30% {
      -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
      transform:rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
      -webkit-transform:rotate(25deg) scale(1) skew(1deg);
      transform:rotate(25deg) scale(1) skew(1deg)
    }
    50% {
      -webkit-transform:rotate(0) scale(1) skew(1deg);
      transform:rotate(0) scale(1) skew(1deg)
    }
    100% {
      -webkit-transform:rotate(0) scale(1) skew(1deg);
      transform:rotate(0) scale(1) skew(1deg)
    }
  }
</style>
<div class='hotline'>
  <div class='phonering-alo-phone phonering-alo-green phonering-alo-show' id='phonering-alo-phoneIcon'>
    <div class='phonering-alo-ph-circle'/>
    <div class='phonering-alo-ph-circle-fill'/>
    <div class='phonering-alo-ph-img-circle'>
      <a class='pps-btn-img' href='tel:#phone-number' title='Liên hệ'> 
        <img alt='Liên hệ' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYJRvKxCTTLDAyVYZTvGW-4-59dkoP5A9oQQVoX6GJ-qafRac44FJcHWH8_Z1BYi-_Dols19ZztATHVjjb-xWujPpcdlOPXqjI5GSDdX98ZS3rXxeOWmLQBm_DD7Mt56a73sokyMHSq1Mb/s1600/v8TniL3.png' width='50'/> 
      </a>
    </div>
  </div>
</div>

BƯỚC 2:

Chỉnh sửa vị trí hoặc màu sắc theo ý mình (như trong code là mình để ở góc dưới bên trái), tìm #phone-number và thêm số điện thoại của bạn vào đó.

BƯỚC 3:

Vào trang chủ của Blogger-> Chủ đề, sau đó tìm thẻ đóng </body> rồi dán toàn bộ code vào trước nó là xong nha!

LỜI KẾT

Cảm ơn các bạn đã đọc bài biết này của mình, nếu có gì thắc mắc hãy comment ở bên dưới mình sẽ giải đáp. Chúc các bạn một ngày làm việc và học tập hiệu quả.

Previous

Next