CÁCH TẠO MENU TRONG BLOGSPOT

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.

1. 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)

2. Chè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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYH_kFmsWTtNalix5UDdZ-DIklb7lxc2GfIhFQqbY1mMQlbj_oLZpq8aHOz5HmgcwGCAOjToUrMTEqhJzOkC6qN83Pp1iCxDT8WeGP18mAD0jdBUovrRXU4PRY8W-oOuYd2hFihf6M6vs/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/AVvXsEhYH_kFmsWTtNalix5UDdZ-DIklb7lxc2GfIhFQqbY1mMQlbj_oLZpq8aHOz5HmgcwGCAOjToUrMTEqhJzOkC6qN83Pp1iCxDT8WeGP18mAD0jdBUovrRXU4PRY8W-oOuYd2hFihf6M6vs/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/AVvXsEhYH_kFmsWTtNalix5UDdZ-DIklb7lxc2GfIhFQqbY1mMQlbj_oLZpq8aHOz5HmgcwGCAOjToUrMTEqhJzOkC6qN83Pp1iCxDT8WeGP18mAD0jdBUovrRXU4PRY8W-oOuYd2hFihf6M6vs/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.

3. Tiê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.
chú ý : sau khi các bạn thực hiện xong thấy mầu không thích thì các bạn có thể thay đổi mã mầu mà mình ưa thích tại đây: color: #777; display: block; background: url
color: #fff; background: url

CHÚC CÁC BẠN THÀNH CÔNG!