Tạo menu nhiều cấp cho Blogspot
Menu là phần không thể thiếu đối với một Website hay Blog. Nó chẳng những giúp cho Blog của bạn đẹp hơn mà còn giúp người đọc lựa chọn tập hợp các bài viết cùng chủ đề đang quan tâm.
Ở bài viết Thay đổi bố cục và tạo menu ngang cho Blogspot tôi đã hướng dẫn cách tạo menu đơn giản từ các nhãn trong bài viết. Hôm nay, tôi tiếp tục hướng dẫn cách tạo menu nhiều bậc cho Blogspot.
Trong một số template Blogspot các bạn download về đã có sẵn menu dạng dropdown nhiều cấp, bài viết này sẽ sử dụng template EducationPress để hướng dẫn cách tùy chỉnh menu theo nội dung Blog của bạn.
Bước 1: Download Template EducationPress
- Bạn vào Google template Blogspot và download Template EducationPress về máy
- Sau khi giải nén các bạn được 2 file XML, 2 file Shortcut và 1 hình logo như hình sau.
Bước 2: Cập nhật Template EducationPress cho Blogspot
- Chọn file XML EducationPress --> Edit để mở file bằng Notepad.
- Tiếp theo bạn copy tất cả các code có trong notepad vừa mở, đừng cố gắng đọc hiểu nó nhé! (Ctl+A --> Ctl+C hoặc phải chuột và chọn Copy)
- Đăng nhập vào blog --> chọn Mẫu --> chọn Chỉnh sửa HTML, khung cửa sổ HTML hiện lên.
- Xóa hết các code HTML (Ctl+A --> Delete) --> Dán code HTML vừa copy ở trên vào thay thế. Chọn Lưu mẫu
- Bạn vừa hoàn thành quá trình thay đổi template cho Blog. Click vào Xem Blog để thấy kết quả của bạn.
Bước 3: Thay đổi tên menu cho Blog
- Vào trang quản trị Blog --> chọn Mẫu --> chọn Chỉnh sửa HTML --> Click chuột bất kỳ vào khung cửa sổ HTML hiện lên. --> nhấn Ctl+F --> Nhập Business vào ô Search.
- Thay dấu # bằng địa chỉ url, thay đổi tên menu tương ứng với nội dung blog của bạn.
- Mỗi meu gồm đường link đến địa chỉ cụ thể (http://...) và phần hiển thị tên menu.
- Bạn có thể thêm hoặc xóa bớt bằng cách copy hoặc delete với code: <li><a href='#'>Downloads</a>
- Thực hiện tương tự cho các menu khác với các dạng template khác nhau.
Đơn giản quá phải không nào! Bạn đâu cần phải biết gì về code HTML, chỉ cần SEARCH --> PASTE và COPY --> PASTE mà vẫn có thể tạo menu một cách chuyên nghiệp cho Blog của mình.
Bonus:
- Nếu bạn sợ nhầm lẫn nào đó khi thực hiện với code HTML hãy thực hiện lưu code trước khi tiến hành chỉnh sửa của mình
- Sau khi hoàn thành việc chỉnh sửa giao diện đúng như mong muốn của bạn. Tiến hành copy code HTML này sang các blog khác của bạn.
Nhận xét
Đăng nhận xét