Hot!

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

Saturday, 24 April 2010
Menu_Label 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.
- VnBlognet [dot] com: Để 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:
1Truy 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)

2Chèn đọan code CSS:
- Tìm (Ctrl-F) đoạn mã: ]]></b:skin>
- 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(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6h5GM5nI/AAAAAAAACqA/ukLum90DRAs/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right;
}
#menu-label li a:hover,
#menu-label li
#current {
color: #fff; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6h5GM5nI/AAAAAAAACqA/ukLum90DRAs/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; }
#menu-label li a:active {
color: #fff; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6h5GM5nI/AAAAAAAACqA/ukLum90DRAs/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right;
}
vào trước Đoạn code ]]></b:skin>
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.

3Tiêu đề 3
- Tìm (Ctrl-F) đoạn mã dưới:
<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Thay thế đoạn mã trên bằng đoạn code bên dưới :
<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='menu-label'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>HOME</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
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 :
<li><a expr:href='link liên kết của bạn'>Menu 1</a></li>
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.


HitCHÚC CÁC BẠN THÀNH CÔNG !!!
Tags: , , ,

Ý kiến bạn đọc [ 2 ]


Anonymous 31 July 2010 12:30

mình muốn tăng độ rộng blog đầy màn hình nhưng ko dc vì trong phần chỉnh bố cục chỉ tăng độ rộng max 1000px vẫn còn 2 khoảng trắng hai bên

Phong cách mới 26 December 2010 15:58

Giúp mình với!!!
Sau khi mình tạo được menu danh mục, mình muốn cho các sản phẩm và mẫu vào danh mục đó thì làm thế nào, xin chỉ giúp.

Ý kiến của bạn