Tạo menu dọc ở sidebar từ các nhãn

Create sidemenu by Label

[FD's BlOg] - Blogger có hỗ trợ tiện ích hiển thị các nhãn của blog, giúp cho người đọc có thể dễ dàng tìm kiếm cũng như truy cập cách danh mục có trên blog. Tuy nhiên nó trông hơi sơ xài, và bài viết này mình sẽ hướng dẫn các bạn biến nó thành 1 menu dọc. Kèm theo các hiệu ứng hình ảnh từ CSS.

Xem hình minh họa:

Trước khi áp dụng thủ thuật:

Sau khi áp dụng thủ thuật:

Bạn sẽ thắc mắc tại sao sau khi thủ thuật lại có thêm nhãn HOME, thực ra đây không phải nhãn, mà một menu mình chèn thêm, ta sẽ nói rõ hơn ở phần dưới.

- Trước khi tiến hành thủ thuật bạn phải tạo cho mình một tiện ích hiển thị các nhãn của blog từ blogger. (cái này rất cơ bản, hy vọng mọi người ai cũng biết).

☼ Bây giờ ta bắt đầu:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn mở rộng mẫu tiện ích (expand widget template)
5. Chèn đọan code CSS của menu vào trên dòng ]]></b:skin>

#menu-label li{
margin:0;
padding:0 0 .25em 0;
text-indent:0px;
line-height:1.5em;
}

/*- menu-label--------------------------- */

#menu-label {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menu-label li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu-label li a:link, #menu-label li a:visited {
color: #CCC;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif);
padding: 8px 0 0 10px;
}
#menu-label li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

- Chú ý: code màu đỏ là độ rộng của menu, bạn hãy cân chỉnh cho bằng với độ rộng của sidebar. Code màu xanh là hình ảnh tạo hiệu ứng cho menu, bạn có thể thay thế chúng, và lưu ý là nếu có thay thế thì ảnh thay thế phải có kích thước hòan tòan khớp và đồng dạng với ảnh gốc (nếu ai rành về CSS thì có thể chọn ảnh không khớp với ảnh gốc, nhưng khi đó bạn phải chỉnh lại code CSS). Còn không tốt nhất là cứ xài ảnh này.

6. Tìm đến code của tiện ích nhãn, nó sẽ trông giống như bên 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>

7. Thay thế tất cả chúng bằng 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>

- Chú ý: dòng code màu xanh chính là menu ta thêm vào, như đã nói ở trên 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 bên dưới vào ngay sau dòng code màu xanh là được.

8. Save template.

Chúc các bạn thành công.