Kubet

Code chèn Hotline và chat Facebook vào chân trang trên giao diện mobile

Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: “Từ khóa” + “giuseart”. (Ví dụ: thiệp tân linh mục giuseart). Để tìm kiếm đúng chuẩn những ấn phẩm của GiuseArt. com, hãy search trên Google với cú pháp : ” Từ khóa ” + ” giuseart “. ( Ví dụ : thiệp tân linh mục giuseart ). Tìm kiếm ngay

Có nhiều plugin có thể giúp bạn tạo nút Liên hệ qua Hotline hoặc Chat Facebook ở chân trang trên website WordPress. Tuy nhiên, ai trong chúng ta cũng thường e ngại khi dùng plugin, vì nỗi lo nó có thể gây nặng nề hoặc xung đột với các thành phần khác của website.

Mình có làm một vài mẫu web và được khách hàng phản hồi khá tích cực về nút Hotline ở góc trái phía dưới trang cũng như 2 nút Hotline + Chat Facebook ở chân trang khi lướt web trên các thiết bị di động. Và hôm nay, mình sẽ hướng dẫn các bạn làm các nút bấm tương tự nhé!

Chèn nút Hotline và chat Facebook vào website
Mời xem demo tại đây : http://cake.ninhbinhweb.com, http://fashion2.ninhbinhweb.com

Lưu ý: nhớ mở cả giao diện mobile để thấy rõ 2 nút ở chân trang nhé!

Tạo nút Hotline cho giao diện Desktop

Thực chất là mình tạo một đoạn HTML để tạo nút Hotline và ném vô file footer.php của giao diện, đoạn HTML đó đã được nhúng sẵn code CSS để định dạng hình dáng và sắc tố theo ý mình muốn .

  • Cách tìm file footer.php

    :

     vào Quản trị > Giao diện > Sửa > Footer.php

  • Đối với theme Flatsome có sử dụng Child theme: Quản trị > Giao diện > Sửa > Chọn giao diện > Flatsome > Footer.php.

Ta copy đoạn code HTML sau và dán vào phía dưới thẻ đóng

trong file footer.php của giao diện.

1234

Hotline:

0972.939.830

và ta có tác dụng như sau :
Tạo nút Hotline cho website wordpress

Giải thích ý nghĩa:

  • Trong đó, ta có một khối
    …

    chứa text “

    Hotline: 0972.939.830

    “.

  • Khối
    …

    đó được đặt nằm trong cặp thẻ … có đường dẫn là “tel:+84972939830”.

  • Do đó, khi ta ấn chuột vào nút Hotline, nó sẽ dẫn link tới số điện thoại bên trong đường dẫn ta vừa ghi.

Bây giờ, tất cả chúng ta sẽ sử dụng đoạn code CSS sau để định dạng cho nút Hotline được đẹp lộng lẫy hơn nhé !
Copy hàng loạt đoạn code CSS dưới đây và dán vào sau thẻ đóng trong file footer.php của giao diện. (dán ngay bên trên đoạn code HTML vừa làm).

12345678910111213141516171819

Tạo nút Hotline cho website wordpress 2

Đoạn code trên tất cả chúng ta đặt cho hotline những thuộc tính chính sau :

  • Nằm im một chỗ không nhúc nhích: Position: fixed;

  • Cách lề trái 10px: left:10px;

  • Cách chân trang 10px: bottom:10px;

  • Màu nền là vàng: background: #fac100;
  • Trên giao diện mobile thì display:none, nghĩa là cho ẩn trên giao diện di động, để phần sau ta chèn 2 cái nút kia đẹp hơn.

Và sau 2 lần copy – paste, chúng ta đã làm được nút Hotline khá ấn tượng rồi phải không? Phần tiếp theo chúng ta cùng tiếp tục nghiên cứu để làm hai nút Hotline + Chat Facebook ở chân trang trên giao diện mobile như hình dưới nhé!

Code tạo nút Hotline và Chat Facebook ở chân trang trên giao diện mobile

Tạo nút Hotline và Chat Facebook ở chân trang trên giao diện mobile

Cũng trong file footer.php của giao diện tất cả chúng ta vừa sửa, giờ đây những bạn copy và dán đoạn code HTML này vào sau thẻ đóng nhé!

123456

ChatFacebook

Gọiđiệnngay

Các bạn thay link Messenger cá thể và số hotline vào nhé. Còn nếu ai không biết địa chỉ Messenger của mình thế nào thì nhìn hình bên dưới nhé, những bạn nhớ copy phần cuối của URL trang cá thể, rồi thêm vào sau “ http://www.messenger.com/t/ ” là được nhé !
Chèn nút Chat Facebook vào website

Bước tiếp theo, copy toàn bộ đoạn code CSS này, và dán vào bên trong cặp thẻ

mà mình vừa sử dụng ở phần trên nhé!

1234567

@truyền thông(max-width:767 px){.mobile-hotline{display:block;bottom:0;width:100%;background:rgba(0,0,0,0.5);height:60 px;position:fixed;z-index:9999999}

.mobile-hotline.mobile-hotline-left{width:45%;float:left;text-align:center;background:# 00 a502 ; margin-left : 10 px ; margin-right : 5 px ; margin-top : 7 px ; height : 45 px ; border-radius : 4 px }

.mobile-hotline.mobile

–

Xem thêm: Cách đánh số trang trong Word 2010 cực nhanh, cực đơn giản

hotline-lefta{color:white;line-height:46 px;font-size:16 px;font-weight:bold}

.mobile-hotline.mobile-hotline-right{width:45%;float:right;text-align:center;background:# fac100 ; margin-left : 5 px ; margin-right : 10 px ; margin-top : 7 px ; height : 45 px ; border-radius : 4 px }

.mobile-hotline.mobile-hotline-righta{color:red;line-height:46 px;font-size:16 px;font-weight:bold}

}

Thế là mình đã có một thanh ngang ở chân trang chứa 2 nút tiện ích Hotline + Chat Facebook rồi nhé !
Tổng hợp code của hàng loạt bài viết :

123456789101112131415161718192021222324252627282930313233343536373839

Hotline:

0972.939.830

ChatFacebook

Gọiđiệnngay

Các bạn cũng hoàn toàn có thể copy hàng loạt đoạn code trên và dán vào sau thẻ đóng trong file footer.php của giao diện bạn đang dùng, để sử dụng đồng thời cả 2 loại nút bấm cho desktop và mobile luôn nhé! Quá dễ phải không nào?

Lời kết

Các bạn thử làm coi sao nhé, nếu không được thì vui mừng liên hệ mình để được tương hỗ nhé. Cám ơn sự chăm sóc theo dõi và ủng hộ của những bạn danh cho blog GiuseArt trong suốt thời hạn qua. Chúc những bạn làm tốt nhé !

4.5

/

Xem thêm: [ Bandwidth ] Băng Thông Rộng Là Gì? Phân Biệt Giữa MBps và Mbps

5
(
16
bầu chọn
)

Source: https://www.lesabeilles.biz
Category: Mạng Internet

Leave a Reply

Your email address will not be published.

Giới Thiệu

Kubet là cái tên đang được quan tâm và nhắc đến nhiều nhất trong làng game đổi thưởng, game cá cược hiện nay, đặc biệt là các game thủ Việt Nam.

Chuyên Mục

Bài viết mới