Bình luận

Thông báo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

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

điện thoại, phone, call me, call, PHONE, gọi, rung, ring
1 min read

 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 تعليقات

  1. 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 =))
© 2025Phạm Văn Linh. All rights reserved. Developed by Jago Desain

Đã phát hiện Ad Blocker

Vui lòng tắt trình chặn quảng cáo của bạn để tiếp tục!

  1. Click on the AdBlock icon in your browser.
    Nhấp vào biểu tượng AdBlock trong trình duyệt của bạn.
    Adblock
  2. Choose, Don't run on pages on this domain.
    Chọn "Always".
    Adblock
  3. The browser icon should have turned green.
    Biểu tượng trình duyệt phải chuyển sang màu xanh lá.
    Adblock
  4. Refresh the page if it didn't refresh automatically. Thanks!
    Làm mới trang nếu nó không tự động làm mới. Cảm ơn bạn rất nhiều!
  1. Click on the AdBlock Plus icon in your browser.
    Nhấp vào biểu tượng AdBlock Plus trong trình duyệt của bạn.
    Adblock
  2. Click the "This Website" button.
    Nhấp vào nút "Trang web này".
    Adblock
  3. The browser icon should have turned grey.
    Biểu tượng trình duyệt phải chuyển sang màu xám.
    Adblock