Thêm nút liên hệ cho website WordPress (Zalo, Facebook, Hotline)

Hướng dẫn cách thêm nút liên hệ cho website WordPress (Zalo, Facebook, Hotline)

Hướng dẫn cách thêm nút liên hệ cho website WordPress (Zalo, Facebook, Hotline)

Bài viết này mình chia sẻ cách thêm nút liên hệ cho website WordPress như: Zalo, Facebook, Call Hotline bằng phương pháp thủ công, tức là không dùng plugin. Mấy cái này mình cũng tổng hợp và tinh chỉnh lại chứ ko phải mình chế ra, nếu bạn thấy nó phù hợp với nhu cầu thì làm thử nhen ^^

Cách thêm nút liên hệ cho website WordPress (Zalo, Facebook, Hotline)

Đây là cách thủ công, và cách này cũng rất đơn giản. Quan trọng nữa là, nếu chèn theo 2 bước mình hướng dẫn bên dưới thì khi theme cập nhật bạn sẽ không bị mất phần code đã thêm vào nè.

Bộ nút liên hệ Zalo, Facebook, Hotline của Ếch Bay

Bộ nút liên hệ này thấy đặt tên class là Ếch Bay, chắc của do bác nào có nghệ danh là Ếch bay chế ra hoặc tinh chỉnh ra, đến tay mình sưu tầm được thì cũng tinh chỉnh thêm nhưng vẫn giữ nguyên ID Class gốc của tác giả, còn icon thì thấy lưu ở bên codfe.com.

Demo nút liên hệ cho website WordPress (Zalo, Facebook, Hotline) trên di động

Demo nút liên hệ cho website WordPress (Zalo, Facebook, Hotline) trên di động

Bước 01: Bạn chèn đoạn code HTML này vào Footer của theme đang dùng (xem hướng dẫn bên dưới, nếu bạn chưa biết cái này). Tiếp theo bạn sửa thông tin các dòng mình để màu ĐỎ thành thông tin liên hệ của bạn.

<div class="echbay-sms-messenger style-for-position-br">
   <div class="phonering-alo-alo">
      <a href="tel:036791822" rel="nofollow" class="echbay-phonering-alo-event">.</a>
   </div>
   <div class="phonering-alo-zalo">
      <a href="https://zalo.me/036791822" target="_blank" rel="nofollow" class="echbay-phonering-zalo-event">.</a>
   </div>
   <div class="phonering-alo-messenger">
      <a href="https://m.me/tinhnguyenntu" target="_blank" rel="nofollow" class="echbay-phonering-messenger-event">.</a>
   </div>
</div>

Ghi chú bổ sung, trong trường hợp bạn không biết chèn code vào Footer như thế nào thì tìm hiểu về cách chèn code thủ vào Footer của theme WordPress đang dùng. Hoặc dùng plugin cho tiện như video bên dưới.

Hướng dẫn cách chèn mã code vào Header và Footer của website WordPress

Bước 02: Bạn đem đoạn CSS này dán vào phần CSS bổ sung (trong phần tùy chỉnh website ấy, web nào cũng có phần này).

.echbay-sms-messenger {
  width: 45px
}

.echbay-sms-messenger a {
  line-height: 45px;
  color: transparent;
  display: block;
}

.echbay-sms-messenger div.phonering-alo-alo {
  display: block;
  background-color: #f54022;
  background-image: url(https://codfe.com/wp-content/uploads/2020/08/call.png);;
}

.echbay-sms-messenger div.phonering-alo-zalo {
  background-image: url(https://codfe.com/wp-content/uploads/2020/08/zalo.png);
}

.echbay-sms-messenger div.phonering-alo-messenger {
  background-image: url(https://demo.temz.vn/flatsome-blog/wp-content/uploads/2024/06/messenger.png);
  background-color: blue;
}

.echbay-sms-messenger div {
  margin: 14px 0;
  background: #0084FF center no-repeat;
  background-size: 70%;
  border-radius: 50%;
  box-shadow: 0 3px 10px #888;
}

.echbay-sms-messenger {
  text-align: center;
  left: 20px;
  position: fixed;
  bottom: 20px;
  z-index: 999;
  display: block;
}

Trong trường hợp bạn muốn tắt bớt nút gọi điện trên máy tính thì chèn thêm đoạn code CSS bên dưới vào phần CSS bổ sung của theme đang dùng là được nhé:

@media screen and (min-width: 1024px) {
.echbay-sms-messenger div.phonering-alo-alo {
display: none;
}

Bộ nút liên hệ theo tinh chỉnh của Hocban.vn

Mình đang sưu tầm và tinh chỉnh một bộ code liên hệ đẹp đẹp và sinh động để anh em copy chèn vào web cho lẹ. Tuy nhiên, mình vẫn chưa sưu tầm được bộ code đẹp và dễ hướng dẫn, khi nào hoàn thành thì mình cập nhật ở đây, anh em có thể hót vìa mà xài ^^

LỜI KẾT

Đây là một bài tổng hợp một số mẫu code nút liên hệ cho website WordPress mà mình tổng hợp và tinh chỉnh. Nếu ae nào có bộ code nút liên hệ đẹp đẹp và xài được, dễ cài… cho mình xin link bài viết bằng bình luận bên dưới nhé, cảm ơn anh em !

3.3/5 - (3 votes)




Subscribe
Notify of
guest

2 Comments
Inline Feedbacks
View all comments
Ưu đãi Hosting, VPS lên đến 70% và tặng bộ theme, plugin bản quyền hơn 1.600$XEM CHI TIẾT
+