Tạo nút nhắn tin Sms, Zalo, Facebook 2020

0
(0)

Chèn bộ code vào web

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

Code HTML:

Nhiều cách bỏ nhưng mình sẽ giới thiệu cách dễ nhất là copy code dưới bỏ vào cuối file function.php (vào giao diện > sửa giao diện > file function.php)

add_action('wp_footer','tn_chat');

function tn_chat(){?>
  <ul id="tnContact">
    <li>
      <a href="https://messenger.com/t/temnerhome" class="iconfb" target="_blank">
        <i class="fab fa-facebook-f"></i>
      </a>
      <span class="label fb" >Chat Facebook</span>
    </li>
    <li>
      <a href="https://zalo.me/0899326019" class="iconzalo" target="_blanl">
        <img src="https://caohungphat.com/wp-content/uploads/2019/07/icon_zalomessage.png" alt="">
      </a>
      <span class="label zalo">Nhắn tin zalo</span>
    </li>
    <li>
      <a href="sms:0899326019" class="iconsms">
        <i class="fas fa-sms"></i>
      </a>
      <span class="label sms">Nhắn tin điện thoại</span>
    </li>
    <li>
      <a href="tel:0899326019" class="iconcall">
        <i class="fas fa-phone"></i>
      </a>
      <span class="label call">Gọi điện thoại</span>
    </li>
  </ul><?php
}

Thay thế SĐT và ID Fanpage của bạn lại hen. Để tránh mất hình về sau thì bạn tải icon zalo tại link dưới và thay thế đường dẫn trong thẻ <img src=”link ảnh thay thế vào đây”/> , tại code trên lại nha.

https://caohungphat.com/wp-content/uploads/2019/07/icon_zalomessage.png

Tiếp theo là

Code CSS:

#tnContact{
  max-width: 230px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 3%;
  left: 2%;
  z-index: 9999;
}
#tnContact li{
  list-style-type: none;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-bottom: 10px;
  white-space: nowrap;
}
#tnContact li a{
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 15px;
  text-align: center;
  border-radius: 99px;
}
#tnContact li a i{
  font-size: 18px;
  color: #fff;
}
#tnContact li .iconzalo img{
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
#tnContact li .label{
  position: relative;
  visibility: hidden;
  cursor: pointer;
  color: #fff;
  padding: 6px 10px;
  border-radius: 0 99px 99px 0;
}
#tnContact li .label:before{
  content: "";
  top: 0;
  left: -15px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 15px solid #189eff;
  border-bottom: 15px solid transparent;
}
#tnContact li:hover .label{visibility: visible;}

/* Background Icon & Label */
.iconfb , .label.fb{background: #3b5999}
.iconzalo , .label.zalo{background: #008df2}
.iconsms , .label.sms{background: #00c300;}
.iconcall , .label.call{background: #383838}

.fb.label:before{  border-right-color: #3b5999!important}
.zalo.label:before{  border-right-color: #008df2!important}
.sms.label:before{  border-right-color: #00c300!important}
.call.label:before{  border-right-color: #383838!important}

 

Bài viết này hữu ích như thế nào?

Hãy bấm vào ngôi sao để đánh giá!

Đánh giá trung bình 0 / 5. Số phiếu bầu : 0

No votes so far! Be the first to rate this post.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x