Hướng dẫn tạo thanh Float menu bám sát lề cho website WordPress

8694 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, lại một dự án thiết kế website cho khách hàng mình vừa mới hoàn thành, và mỗi dự án thiết kế website luôn cần một vài thủ thuật chỉnh sửa nho nhỏ để hoàn thiện theo mong muốn của khách. Trong số đó phải kể đến các đoạn code HTML và CSS cực kỳ hữu dụng, ví dụ như thanh Float menu bám sát lề phải cho website. Bài viết này mình muốn chia sẻ với các bạn điều ấy!

Float menu bám sát lề cho website

Để hiểu rõ hơn thứ mình chuẩn bị nói đây, mời các bạn xem hình!

Có thể hiểu đơn giản là mình làm một khối div gồm các biểu tượng và các liên kết bám dính ở viền trái của màn hình duyệt web. Mặc định khối đó sẽ ẩn đi chỉ hiện các icon mà thôi, nhưng khi mình rê chuột (hover) vào khối đó thì nó xổ ra hết toàn bộ các thông tin và liên kết khác.

Xem demo: http://edu5.ninhbinhweb.info/

Giuseart.com---Hướng-dẫn-tạo-Float-Bar-bám-viền-màn-hình-cho-website
Giuseart.com- Hướng dẫn tạo Float menu bám viền màn hình cho website WordPress

Bây giờ mình bắt tay vào việc luôn nhé!

Đối với giao diện Flatsome:

Bước 1: Copy code HTML và CSS

Trên thanh Admin Bar đen đen trên cùng có chữ Flatsome, các bạn chọn lần lượt vào Advanced – Global setting – Footer Script.

Tại khoảng trống để nhập code trong Footer Scipt, các bạn paste toàn bộ đoạn code sau:

Bước 2: Thay liên kết và text 

Đoạn code demo bên trên mình gắn link cho 3 chữ “Lịch khai giảng”, “Liên hệ”“Đăng ký học thử”. Các bạn chỉ việc thay liên kết cho nó trong thẻ <a href=”thay liên kết tại đây“> như hình diễn giải sau:

Giuseart.com-Tạo-float-menu-cho-website
Giuseart.com – Thay link trong phần màu đỏ và thay text trong phần màu xanh

Lưu ý: Trong demo của mình, nút “Đăng ký học thử” mình gắn liên kết neo xuống phía dưới Form đăng ký ở footer nên mình để link #dang-ky và theo đó có cả đoạn Java Script bên dưới để tạo hiệu ứng trượt mượt mà khi bấm vào liên kết neo cho website. Nếu bạn không sử dụng, có thể thay link và xóa đoạn JavaSript kia đi nhé!

Bước 3: Thay link ảnh icon

Các bạn tải hết 3 icon ở bên dưới về và upload lên website nhé! Quản trị – Thư viện – Tải lên – Tải tập tin lên.

Sau khi tải thành công các icon lên thư viện WordPress, các bạn vào lấy link của icon đó và thay lần lượt vào các vị trí như mình đánh dấu dưới đây:

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

Đối với giao diện bất kỳ không phải Flatsome

Bước 1: Đối với giao diện bất kỳ không phải Flatsome, các bạn vào Quản trị – Giao diện – Sửa – Chọn theme đang sử dụng (theme mẹ) – Footer.php.

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

Bước 3: Lưu lại và tận hưởng thành quả 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 làm đúng ý mình nhé! Nếu trong quá trình thực hiện theo hướng dẫn mà mắc chỗ nào hoặc bị lỗi thì vui lòng comment để anh em cùng trợ giúp nhé!

Nội dung đoạn code có sự tham khảo từ source website của Langmaster

5/5 - (7 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!

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

13 thoughts on “Hướng dẫn tạo thanh Float menu bám sát lề cho website WordPress

  1. Gia Tuấn says:

    Chào Anh.
    Anh cho em hỏi sao em làm như Anh thì ở giao diện điện thoại nó lại mất đi menu chính của trang vậy nhỉ.
    P/s: em mới bỏ ra lại thì menu chính sử dụng được. Còn cho đoạn code trên vào thì menu chính ở giao diện điện thoại nó không click được.
    Web: https://dienlanhgiatuan.com.
    Cảm ơn Anh

  2. Phạm Lộc says:

    Mình nhận thấy nếu như làm theo hướng dẫn không thì giao diện pc (tiêu chuẩn) thì hiển thị ok nhìn rất đẹp. Những nếu muốn hiễn thị mobile thì cần phải code thêm cho giao diện đó 1 chút nữa thì hoàn hão hơn.

    • Lê Văn Thiện says:

      Vâng, thật ra đoạn này mình chỉ tính set riêng cho PC thôi. Còn ai cần hiển thị trên mobile thì bỏ đoạn này đi nha: @media (max-width: 549px){
      .box_fixRight{display:none}
      }

  3. Bạc Tiểu Phương says:

    Bác cho em hỏi trên mobile mình muốn hiện thì có 1 nút kéo ra, muốn ẩn vào cũng thế thì làm như thế nào ạ?

  4. Đặng Ngọc Tuấn says:

    hi anh! anh có thể cho em đoạn code bên trái thay vì bên phải được không ạ ! Cảm ơn anh nhiều lắm ạ!

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