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 ngay
2671 lượt xem

Code tạo thanh liên hệ nhanh trên giao diện mobile bằng HTML và CSS

Giuseart.com---Tạo-thanh-liên-hệ-trên-giao-diện-mobile-cho-website-Wordpress

Chào các bạn, lang thang trên group Flatsome Việt Nam, mình tình cờ đọc được câu hỏi của một bạn về thanh liên hệ nhanh (mình tạm gọi là Contact Bar) khá đẹp trên giao diện mobile. Nhận thấy có nhiều bạn cũng chưa biết cách làm nên mình tìm cách làm để chia sẻ cho các bạn, hy vọng nó sẽ hữu ích, mời các bạn theo dõi.

Giuseart.com---Tạo-thanh-liên-hệ-trên-giao-diện-mobile-cho-website-Wordpress
Tạo thanh liên hệ nhanh gồm nút Gọi điện, Nhắn tin, Chat Zalo và Chat Messenger

Nhìn hình trên thì các bạn biết chúng ta chuẩn bị làm công việc gì rồi phải không? Hôm nay mình hướng dẫn các bạn làm thanh liên hệ nhanh bao gồm 4 nút: gọi điện, nhắn tin, chat Zalo và chat Messenger nhé!

Tầm quan trọng của các nút Call to Action

Thực chất cái mình chuẩn bị hướng dẫn các bạn làm đây được gọi nôm na là các nút “Call to Action”, nghĩa là kêu gọi hành vi người lướt website click (bấm) vào mục tiêu chúng ta đặt sẵn.

Trong trường hợp này, các nút Call to Action  giúp khách hàng liên hệ nhanh với chúng ta thông qua 4 kênh liên hệ chủ yếu bao gồm: gọi điện, nhắn tin, chat Zalochat Messenger.

Đối với những website bán hàng hoặc dịch vụ, các nút liên hệ nhanh này có một vai trò quan trọng và gần như không thể thiếu. Chúng giúp khách hàng tương tác trực tiếp và nhanh nhất với chúng ta.

Đối với một số bạn thì thanh liên hệ nhanh này nhìn có vẻ khá nhàm chán. Tuy nhiên, đối với mình thì mình đánh giá khá cao kiểu hiển thị đơn giản và trực quan như vậy.

Còn bạn thì sao? Nếu bạn cũng thích, bắt tay làm luôn nhé!

Code chèn thanh liên hệ nhanh vào giao diện mobile

Đối với theme Flatsome

Bước 1: Tại thanh Admin Bar đen đen trên cùng, truy cập chữ FlatsomeAdvancedGlobal SettingFooter Script

Bước 2: Copy toàn bộ đoạn code dưới đây và paste vào Footer Scipt nhé!

Lưu ý:

  • Sửa số điện thoại của bạn để khách gọi tới trong tel:0972939830
  • Sửa số điện thoại của bạn để khách nhắn tin đến trong sms:0972939830
  • Sửa link trang zalo cá nhân của bạn để khách nhắn tin tới trong href=”http://zaloapp.com/gr/p/3ur778onb9ak
  • Sửa tên user Facebook của bạn để khách nhắn tin tới trong href=”https://messenger.com/t/joseph.thien.75
  • Các bạn có thể tải các icon trên server của ninhbinhweb.net về, upload lên web của các bạn rồi thay các link ảnh vào đoạn code trên nhé!

Bước 3: Lưu lại và hưởng thành quả trên giao diện mobile.

Đối với theme bất kỳ không phải Flatsome

Bước 1: Truy cập  Giao diện – Sửa – chọn theme đang dùng để sửa – Footer.php

Bước 2: Copy toàn bộ đoạn code ở bên trên vào giữa thẻ đóng </body></html>

Bước 3: Lưu lại và tận hưởng thành quả trên mobile nhé!

Giuseart.com---Tạo-thanh-liên-hệ-nhanh-trên-giao-diện-mobile
Tạo thanh liên hệ nhanh trên giao diện mobile bằng HTML và CSS

Lời kết

Vậy là các bạn có thể tự làm một thanh liên hệ nhanh trên giao diện mobile của website WordPress rồi phải không? Nếu bạn nào không làm được hoặc gặp sự cố gì, vui lòng comment để anh em trợ giúp nhé!

Chúc các bạn có những trải nghiệm thú vị khi ghé thăm website nhé!

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Bình luận Facebook

6 bình luận trong “Code tạo thanh liên hệ nhanh trên giao diện mobile bằng HTML và CSS

  1. Kiên says:

    Chào bạn, mình đã áp dụng và đã hiện thị trên website nhưng mình test trên iphone thì phải click 2 lần vào nút điện thoại hoặc nhắn tin mới gọi hoặc nhắn tin được. Mong bạn xem lại có gì hỗ trợ cho mọi người. Cám ơn bạn đã chia sẻ.

  2. Văn Dương says:

    Chào bạn, Sao phần chat facebook của mình đã làm như hướng dẫn nhưng khi click vào thì lại mở ra trình duyệt và vào trang quảng cáo ứng dụng messenger nhỉ. Mình muốn nó mở trong ứng dụng Messenger của điện thoại thì làm thế nào? Mong bạn hỗ trợ và cảm ơn bạn đã chia sẻ.

  3. Mai Nam says:

    Cám ơn bạn.
    Có cách nào thêm nút menu hiện phía dưới chân ngang thay cho nút nhắn tin đó ko bạn nhỉ ? kẻo bt menu nằm top với tay xa quá.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Chat Facebook