Bình luận

Xem tất cả 125 bình luận

Thông báo

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

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 !

You may like these posts

  • Hướng Dẫn Nhúng Messenger Chat Vào Blogspot
    LỜI NÓI ĐẦU: Chào mừng các bạn đã đến với blog của mình. Hôm nay mình sẽ hướng dẫn cho các bạn cách thêm chat messenger vào blog. CÁCH LÀM: Đầu tiên chún…
  • Share Code Hiệu Ứng Loading Cho Blogspot
    Hiệu Ứng Loading Cho Blogspot Hello các bạn, chào mừng các bạn đã quay trở lại với bài viết tiếp theo của mình. Thủ thuật liên quan đến blog thì là vô hạn nên có share bao nhiêu cũ…
  • Share Code Hiệu Ứng Thả TYM Khi Click Chuột
    Hiệu Ứng Thả Tim Khi Click Chuột Hí các bạn, chào mừng các bạn đã đến với bài viết tiếp theo của mình. Tiếp tục chuyên mục Blogger Tricks mình sẽ chia sẻ cho các bạn code th…
  • Hướng dẫn thêm widget recent comment cho template Median
    Hê lô các bạn, sau khi đăng bài hướng dẫn thêm popup thông báo mình nhận được khá nhiều phải hồi tích cực từ các bạn vì vậy hôm nay mình sẽ hướng dẫn thêm cho các bạn cách t…
  • Hướng Dẫn Tạo Trang Chuyển Hướng Cho Blog
    TRANG CHUYỂN HƯỚNG CHO BLOG Nhông xê ô các mai phen, có thể bạn đã thấy trang cảnh báo khi ấn vào Demo ở các bài share template. Hôm nay mình sẽ hướng dẫn các bạn tạo một tran…
  • Hướng dẫn thêm widget thông báo cho template Median
    Hê lô các bạn, những ngày qua các mình nhận được rất nhiều yêu cầu về hướng dẫn cách thêm widget thông báo trên header. Chính vì vậy hôm nay mình sẽ hướng dẫn các bạn cách t…

3 comments

  1. second ago
    thế mà cũng nghĩ ra được, biết thế mình nghĩ trước để viết bài này trước :((
    1. second ago
      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

© 2025 ‧ Phạ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