Hello, Andy đây.
Rảnh rỗi mò ra hai đoạn code trang trí wpr khá hay ho, mình tiếp tục share cho bạn nào có nhu cầu, được phát triển từ code nút “back to top” của nhà Butterfly nha (link).
Mục đích dùng code này của mình là tạo thêm một menu phụ cố định trên màn hình (theme mà mình đang sử dụng bị ẩn hết phần widget). Hai đoạn code ví dụ bên dưới mình sẽ “show” ba mục là facebook, wattpad và inkitt, các bạn có thể thay đổi/thêm bớt tùy ý.
Chèn code ở phần widget footer: tùy biến > widget > footer
- Đoạn code_1:
<div><a style=”display: scroll; position: fixed; bottom: 1px; left: 7px;” title=”Faceboock” href=”[link facebook]”>Facebook</a>
<a style=”display: scroll; position: fixed; bottom: 1px; left: 80px;” title=”Wattpad” href=”[link wattpad]”>| Wattpad</a>
<a style=”display: scroll; position: fixed; bottom: 1px; left: 160px;” title=”Inkitt” href=”[link inkitt]”>| Inkitt</a></div>
Kết quả ra như ảnh dưới.
Từ nút back to top cố định trên màn hình, mình viết thêm cho code dài hơn, biến nó trở thành một cái “menu cố định ở chân trang”. Tuy nhiên sử dụng trên điện thoại màn hình nhỏ dễ gây cảm giác hơi vướng víu và bất tiện, do đó mình đã thử thu gọn lại ở mẫu code_2 tiếp theo (ưu điểm lớn nhất của code_1 chính là dùng được cho tất cả các theme nhé).
- Đoạn code_2:
<div style=”display: scroll; position: fixed; color: black; bottom: 1px; left: 7px; text-align: center;”><details>
<summary><img src=”[link ảnh icon menu]” width=”40″ height=”40″ title=”Menu”></summary>
<div style=”background: [màu nền]; padding: 5px 10px; border: 1px solid black;” title=”Facebook”><a href=”[link facebook]”>Facebook</a></div>
<div style=”background: [màu nền]; padding: 5px 10px; border: 1px solid black;” title=”Wattpad”><a href=”[link wattpad]”>Wattpad</a></div>
<div style=”background: [màu nền]; padding: 5px 10px; border: 1px solid black;” title=”Inkitt”><a href=”[link inkitt]”>Inkitt</a></div></details></div>
Kết quả ra như ảnh dưới.
Mẫu code_2 có thêm code spoiler nên trông sẽ gọn gàng và “chuyên nghiệp” hơn code_1, tuy nhiên nhược điểm của nó đó là chỉ sử dụng được ở một số theme nhất định (chỉ thích hợp với những theme không có dấu mũi tên hình tam giác khi sử dụng code spoiler thui).
Các bạn có thể thoải mái thay đổi/thêm bớt vào đoạn code để tạo một bảng menu có nội dung theo nhu cầu của mình. Nguyên một cụm: <div style=”background: [màu nền]; padding: 5px 10px; border: 1px solid black;” title=”Facebook”><a href=”[link facebook]”>Facebook</a></div> là một dòng của menu, có thể thay đổi (ví dụ đổi thành Home rồi dán link trang chủ), xóa đi hoặc nhân lên tùy thích.
Hết gòi nà, đơn giản vậy thui á, có gì thắc mắc các bạn cứ comment bên dưới, mình sẽ giải đáp trong khả năng có thể và hoan nghênh mọi ý kiến góp ý ^^.
(Code tham khảo: nút back to top của Butterfly và spoiler, khung viền của Sera Hwang)
(Dùng code thì không cần ghi cre nhưng bê/đăng lại nguyên xi bài này đi đâu thì ghi cre hộ mình nhé T^T)
•Nhà Nấm• 