Bình luận

Thông báo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Trang chủ
Blogger-Tricks
Code

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/AVvXsEgj_Bgy3hCM7i3MjKI9G2ZbTspFdYTgSBLKgNaHPZfgong5woqZPPtbeQqfW0c4SWYs6XcQ137Ne_eCZ0drO-8V1K9wFRyQ-mw2TWF4ZUzY9eLcTnuofCdVUP2RF7CrQYAaSUnhzUqqmMxa/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ả.
Đánh Giá Bài Viết:
No pain, no gain !

3 nhận xét

  1. ni ke xư =))
  2. thế mà cũng nghĩ ra được, biết thế mình nghĩ trước để viết bài này trước :((
    1. Thế thì viết quả bài mới hay hơn bài này thuii =))

Created By

All posts are protected by DMCA.
Reproduction in any form is strictly prohibited!

Partner

Tools

Code

Company

Contact

© ‧ Phạm Văn Linh. All rights reserved. Developed by Jago Desain
-->