Tùy biến tiện ích Labels thành menu danh mục

 

Ngân Lượng là số 1

   

Như các bạn biết tiện ích Labels được cung cấp bởi Blogger cho phép các bạn tạo danh mục các labels theo thứ tự Alphabete hoặc theo tần suất (số bài) theo hàng dọc rất hữu ích, giúp cho người đọc dễ dàng truy cập tới các chủ đề đáng lưu ý, tuy nhiên hình thức của nó đơn giản và không được đẹp mắt.

 

Để dễ tưởng tượng bạn có thể tham khảo bài Top 25 menu dọc “vertical” đẹp và hữu ích các hình thức hiển thị menu kiểu dọc. Áp dụng thủ thuật này cho Label bạn không cần phải thực hiện công đoạn chèn và chỉnh sửa link liên kết.

Trong bày xin giới thiệu Cách thực hiện menu từ Label có hiển thị như hình minh họa trên:

Truy cập vào Blogger:

- Truy cập vào Blogger Bảng điều khiển (Dashboard)  >> Bố cục (Layout)   >>  Chỉnh sửa HTML (Edit HTML). và click chọn vào ô check Mở rộng mẫu tiện ích (expand widget template)

Chèn đọan code CSS:

- Tìm (Ctrl-F) đoạn mã: ]]>
- Chèn đoạn code css

#menu-label ul {
list-style: none; margin: 0; padding: 0;
}
#menu-label img {
border: none;
}
#menu-label {
width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px;
}
#menu-label li a {
height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none;
}
#menu-label li a:link,
#menu-label li a:visited {
color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjphvfBUuml7wvFEGWaKCweZ1iBqVWh7grj2JtagNXS6C9AyPzNFTLtDwYM3RhHmp3rdKt3MCsSVcL66nFgHGQb57D1MwPm-eFqA2ras5h90aqxhT6YRHg1GRet5FxRWa7XYU4OL9fW-I/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right;
}
#menu-label li a:hover,
#menu-label li
#current {
color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjphvfBUuml7wvFEGWaKCweZ1iBqVWh7grj2JtagNXS6C9AyPzNFTLtDwYM3RhHmp3rdKt3MCsSVcL66nFgHGQb57D1MwPm-eFqA2ras5h90aqxhT6YRHg1GRet5FxRWa7XYU4OL9fW-I/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; }
#menu-label li a:active {
color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjphvfBUuml7wvFEGWaKCweZ1iBqVWh7grj2JtagNXS6C9AyPzNFTLtDwYM3RhHmp3rdKt3MCsSVcL66nFgHGQb57D1MwPm-eFqA2ras5h90aqxhT6YRHg1GRet5FxRWa7XYU4OL9fW-I/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right;
}

vào trước Đoạn code ]]>
width: 200px; là chiều rộng của Sidebar, bạn thay đổi giá trị này tùy thuộc vào chiều rộng của sidebar trong mẫu Template.

Tiêu đề 3

- Tìm (Ctrl-F) đoạn mã dưới:

• 
  
  
  
  
  
  
  
  
  
  ()
  

Thay thế đoạn mã trên bằng đoạn code bên dưới :

• HOME

Dòng code màu xanh chính là menu trỏ về trang Home ta thêm vào bởi HOME không phải là 1 nhãn, mà là 1 menu ta chèn thêm vào.
Nếu muốn thêm menu khác nữa ta chỉ việc thêm đọan code :

Menu 1

bên dưới vào ngay sau dòng code màu xanh là được.
Bạn có thể tham khảo thêm bài Top 25 menu dọc “vertical” đẹp và hữu ích để chọn các CSS hợp với mẫu Blog của bạn.