Hướng dẫn tạo các nút liên hệ nhanh tuyệt đẹp cho website

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

Chào các bạn, hôm qua mình đã viết một bài chia sẻ code HTML và CSS tạo các nút liên hệ nhanh cho website rồi phải không? Hôm nay mình tiếp tục share một đoạn code tạo nút liên hệ nhanh khác cũng rất đẹp và hữu ích, hy vọng các bạn sẽ thích.

Mình tham khảo một số website đẹp trên mạng, thấy họ có mấy nút liên hệ nhanh tuyệt vời quá nên mình tổng hợp và cóp nhặt về để làm cho website của mình. Kết quả là thật đáng tự hào, code HTML và CSS khá đơn giản nhưng cực kỳ hữu ích. Các bạn có thể xem hình mô tả ở đây:

Xem demo thực tế: http://fashion3.ninhbinhweb.biz/

Code tạo nút liên hệ nhanh bằng HTML và CSS cho website

Chúng ta cùng nhau bắt tay làm luôn nhé! Code này cực kỳ hữu ích và thích hợp đặc biệt cho các bạn mới vào nghề, đặc biệt là các bạn chưa biết gì về CODE, các bạn chỉ việc copy và paste theo đúng hướng dẫn là được thôi. Mình đã test rất nhiều lần và chỉ cần copy – paste đúng chỗ là nó hoạt động luôn không cần nói nhiều.

Đối với theme Flatsome

Bước 1: Truy cập vị trí cần dán code

Trên thanh đen đen trên cùng có chữ Flatsome – Advanced – Global Setting – Footer Script

Bước 2: Cắt dán đoạn code cần thiết

Các bạn copy và paste toàn bộ đoạn code dưới đây vào Footer Script nhé:

Bước 3: Thay thế, chỉnh sửa thông tin cần thiết

Các bạn có thể tải các ảnh icon về rồi upload lên host, lấy url link ảnh để thay thế vào các link ảnh của ninhbinhweb nha, ví dụ link như này:

thay-link-ảnh-cho-code-tạo-nút-liên-hệ-nhanh
Các bạn có thể tải ảnh về, upload lên host và lấy link ảnh để thay vào các vị trí như hình mình mô tả ở trên nhé

Các bạn cũng có thể thay nội dung các số điện thoại, link facebook và link chat zalo nhé!

Thay-link-liên-hệ-nhanh
Các bạn có thể thay các link liên hệ nhanh của các bạn vào các vị trí như mình mô tả nhé

Bước 4: Lưu lại và tận hưởng thành quả

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

Nếu bạn không dùng Flatsome, chúng ta sẽ bỏ đoạn code này vào giữa hai thẻ đóng </body></html> của file Footer.php nhé!

Còn bạn nào mà không biết file Footer.php ở chỗ nào nữa thì vô Quản trị – Giao diện – Sửa giao diện – tìm file Footer.php ở cột bên phải nhé!

Lời kết

Cám ơn các bạn đã quan tâm theo dõi và ủng hộ GiuseArt.com trong suốt thời gian qua. Chúc các bạn có những trải nghiệm thú vị khi ghé thăm website nhé! Mọi nhu cầu thiết kế website hoặc thiết kế đồ họa và in ấn sáng tạo, vui lòng liên hệ admin để được tư vấn nhiệt tình nhé!

+ Liên hệ: Lê Văn Thiện
+ Phone: 0972939830
+ Email: giuselethien@gmail.com
+ Website: www.giuseart.com
+ Flickr: www.flickr.com/photos/77493237@N07/albums
+ Behance: https://www.behance.net/giuselethien
+ Pintesest: https://www.pinterest.com/giuselethien/pins

4.6/5 - (11 bình chọn)
Chia sẻ bài viết:

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:

24 thoughts on “Hướng dẫn tạo các nút liên hệ nhanh tuyệt đẹp cho website

  1. Lê Huệ says:

    Đẹp quá ạ, Ad cho mình hỏi với, giờ mình muốn TẮT hiển thị trên máy tính thì làm sao ạ?

  2. Phi says:

    Chỉ tiếc 1 cái là trên giao diện mobile khi kéo xuống cuối trang, thì phần liên hệ này nó che mất tiêu phần footer dưới cùng rùi @@ Thiện chỉ mình cách fix với, thank you !

  3. Sang says:

    Anh có thể chỉ e chính sửa trên giao diện PC vẫn có thanh ngang cố định như trên Mobile được không, em cảm ơn

  4. Minh Tâm Media says:

    Cảm ơn bạn đã chia sẻ đoạn code rất hữu ích.
    Nếu có thể đóng gói thành Plug-in và đưa lên WordPress .org thì còn nhiều người sử dụng hơn nữa

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 *

Trang chủ
Tìm kiếm
Lên trên
Chia sẻ
Tải lại
Bình luận