Code html tạo nút gọi điện trên website và blog

Tạo nút gọi điện trên website và blog html

Code html tạo nút gọi điện trên website và blog

bạn chỉ cần thêm dòng code sau trước thẻ </body> là được nhé. sau đó bạn chỉnh một số cơ bạn như số điện thoại của bạn là được !

Thêm code

<!-- tạo nút gọi điện -->
 
<div class='quick-call-button'/>
        <div class='call-now-button'>     
      <div>
        <p class='call-text'>
              <a href='Tel: 0339439993' title='Liên Hệ Với Tôi'> Liên Hệ Với Tôi</a> 
        </p>            
<a href='Tel: 0339439993' title='Liên Hệ Với Tôi'>     
              <div
    class='quick-alo-ph-circle'/>           
              <div
    class='quick-alo-ph-circle-fill'/>         
              <div class='quick-alo-ph-btn-icon quick-alo-phone-img-circle'/>
        </a>
      </div>
    </div>     
<style>
  @media screen and (max-width: 1920px)   
  {
      .call-now-button { display: flex !important; background: #d818db;
    }    
      .quick-call-button { display: block !important; }}   
  @media screen and (min-width:px) {
  .call-now-button .call-text { display: none !important; }}    
    @media screen and (max-width: 1024px)
  {
  .call-now-button .call-text{ display: none !important;}
  }    
  .call-now-button { top: 80%; }    
  .call-now-button { left: 3%; }    
  .call-now-button { background: #d818db; }    
  .quick-alo-ph-btn-icon { background-color:#ffffff !important; }  
  .call-now-button .call-text { color: #fff;
}   </style>
    <link
    href='https://cdn.jsdelivr.net/gh/hongblogger/2019@master/quick-call-button-hong.css'
    id='lv_css-css' media='all' rel='stylesheet' type='text/css'/>

Còn nếu các bạn chỉ muốn hiện thị trên di động thôi thì thêm dòng code sau thay vì thêm dòng code bên trên !

<b:if cond='data:blog.isMobileRequest != &quot;true&quot;'>
<!-- Start Quick Buttons Share By vungve.com -->
<div class='quick-call-button'></div>
<div class='call-now-button'>
<div><p class='call-text'><a href='Tel: 0977995621' title='Liên Hệ Với Tôi' > Liên Hệ Với Tôi </a></p>
<a href='Tel: 0977995621' title='Liên Hệ Với Tôi' >
<div class='quick-alo-ph-circle'></div>
<div class='quick-alo-ph-circle-fill'></div>
<div class='quick-alo-ph-btn-icon quick-alo-phone-img-circle'></div>
</a>
header ads

</div>
</div>
<style>
@media screen and (max-width: 1920px) {
.call-now-button { display: flex !important; background: #d818db; }
.quick-call-button { display: block !important; }
}
@media screen and (min-width: px) {
.call-now-button .call-text { display: none !important; }
}
@media screen and (max-width: 1024px) {
.call-now-button .call-text { display: none !important; }
header ads

}
.call-now-button { top: 80%; }
.call-now-button { left: 3%; }
.call-now-button { background: #d818db; }
.quick-alo-ph-btn-icon { background-color: #ffffff !important; }
.call-now-button .call-text { color: #fff; }
</style>
<!-- /End Quick Buttons Share By vungve.com -->
<link rel='stylesheet' id='lv_css-css'  href='https://cdn.jsdelivr.net/gh/hongblogger/2019@master/quick-call-button-hong.css' type='text/css' media='all' />
<!-- nut goi ngay - call now button - vungve.com-->
</b:if>

Chỉnh sửa như sau :

Dòng quick-alo-ph-btn-icon quick-alo-phone-img-circle là phần thay ảnh

Ví dụ :

Bạn muốn đối sang zalo bạn thay thành quick-alo-ph-btn-icon quick-alo-zalo-img-circle và sửa Tel: 0977995621 Thành https://zalo.me/0339439993 của bạn

Bạn muốn dùng email thì bạn đổi thành quick-alo-ph-btn-icon quick-alo-email-img-circle và sửa Tel: 0977995621 Thành mailto:email_của_bạn@gmail.com của bạn

Bạn muốn dùng Giỏ hàng thì bạn đổi thành quick-alo-ph-btn-icon quick-alo-cart-img-circle và sửa Tel: 0977995621 Thành link giỏ hàng của bạn

Bạn muốn dùng Messenger thì bạn đổi thành quick-alo-ph-btn-icon quick-alo-messenger-img-circle và sửa Tel: 0977995621 Thành liên kết Messenger của bạn

Bạn muốn dùng Face thì bạn đổi thành quick-alo-ph-btn-icon quick-alo-facebook-img-circle và sửa Tel: 0977995621 Thành liên kết facebook của bạn