Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS

Mặc định các nhãn, trang của Blogspot được hiển thị rất đơn điệu, nếu bạn muốn các nhãn hiển thị được đẹp hơn, bạn có thể tạo menu dọc cho nó với thủ thuật blogger, để tạo menu dọc các bạn phải dán code vào mã nguồn và một vào HTML/Javacrip.

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Bố cục
3. Chọn Thêm tiện ích (Add Widgrt) - thêm 1 tiện ích HTML/Javarscrip.
4. Dán đoạn code bên dưới vào:

<div id="menulaber">
 <ul>
 <li><a href="#1">Link  1</a></li> 
 <li><a href="#2">Link  2</a></li> 
 <li><a href="#3">Link  3</a></li> 
 <li><a href="#4">Link  4</a></li> 
 <li><a href="#5">Link 5</a></li> 
 </ul>
 </div> 

5. Lưu tiện ích lại.

6. Tiếp theo các bạn định dạng CSS cho các menu của các bạn bằng cách:

• Chọn Thiết Kế
• Chọn Chỉnh sử HTML
• Dưới đây là 5 mẫu nếu thích mẫu nào thì các bạn Copy đoạn CSS đó và dán vào trước thẻ ]]></b:skin>

Mẫu 1:

CSS

#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img {  border: none; } #menulaber { width: 200px; margin: 10px; } 
#menulaber 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; } 
#menulaber li a:link, #menulaber li a:visited {  color: #FFF; display: block; background:  url(http://1.bp.blogspot.com/-EIWl0LH5GGU/T3bNnVSveXI/AAAAAAAAAyM/3ify3MKYCm8/s1600/menu1-namkna-blogspot-com.gif);  padding: 8px 0 0 35px; } 
#menulaber li a:hover { color: #FFF; background:  url(http://1.bp.blogspot.com/-EIWl0LH5GGU/T3bNnVSveXI/AAAAAAAAAyM/3ify3MKYCm8/s1600/menu1-namkna-blogspot-com.gif)  0 -32px; padding: 8px 0 0 35px; } 

Mẫu 2:

CSS: 

#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img {  border: none; } 
#menulaber { width: 200px; margin: 10px; } 
#menulaber 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; } 
#menulaber li a:link, #menulaber li a:visited {  color: #8D9179; display: block; background:  url(http://4.bp.blogspot.com/-RMcjxhKm1K4/T3bTXeZW_hI/AAAAAAAAAyo/9CS9tj7ni8M/s320/menu2-namkna-blogspot-com.gif);  padding: 8px 0 0 10px; } 
#menulaber li a:hover, #menulaber li #current, #menulaber  li a:active { color: #6C7250; background:  url(http://4.bp.blogspot.com/-RMcjxhKm1K4/T3bTXeZW_hI/AAAAAAAAAyo/9CS9tj7ni8M/s320/menu2-namkna-blogspot-com.gif)  0 -32px; padding: 8px 0 0 10px; }

Mẫu 3: 

CSS

#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img {  border: none; } 
#menulaber { width: 200px; margin: 10px; } 
#menulaber li a {  font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0;  font-size: 10pt; font-weight: bold; background: #FFF; height: 24px;  text-decoration: none; } 
#menulaber li a:link, #menulaber li a:visited { color:  #FFF; display: block; background:  url(http://3.bp.blogspot.com/-6VOcn1yU-mA/T3bVtp48VpI/AAAAAAAAAy0/76SPv0e3XNk/s320/menu3-namkna-blogspot-com.gif);  padding: 8px 0 0 20px; } 
#menulaber li a:hover { color: #FFF; background:  url(http://3.bp.blogspot.com/-6VOcn1yU-mA/T3bVtp48VpI/AAAAAAAAAy0/76SPv0e3XNk/s320/menu3-namkna-blogspot-com.gif)  0 -32px; padding: 8px 0 0 20px; } 

Mẫu 4: 

CSS

#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img {  border: none; } 
#menulaber { width: 200px; border: 1px solid #ccc; margin:  10px; } 
#menulaber 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; } 
#menulaber li  a:link, #menulaber li a:visited { color: #888; display: block; background:  url(http://1.bp.blogspot.com/-E8Ez5SN-ifw/T3bYGrhegQI/AAAAAAAAAzA/gseM-GIWUXE/s320/menu4-namkna-blogspot-com.gif);  padding: 8px 0 0 30px; } 
#menulaber li a:hover, #menulaber li #current, #menulaber  li a:active { color: #283A50; background:  url(http://1.bp.blogspot.com/-E8Ez5SN-ifw/T3bYGrhegQI/AAAAAAAAAzA/gseM-GIWUXE/s320/menu4-namkna-blogspot-com.gif)  0 -32px; padding: 8px 0 0 30px; }

Mẫu 5: 

CSS:

#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img {  border: none; } #menulaber { width: 200px; margin: 10px; } 
#menulaber 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; } 
#menulaber li a:link, #menulaber li a:visited {  color: #fff; display: block; background:  url(http://3.bp.blogspot.com/-HtSueKcKsZs/T3bZzNPKcMI/AAAAAAAAAzM/gfxu3AKjZaA/s320/menu5-namkna-blogspot-com.gif)  0 -32px; padding: 8px 0 0 10px; } 
#menulaber li a:hover { color: #333;  background:  url(http://3.bp.blogspot.com/-HtSueKcKsZs/T3bZzNPKcMI/AAAAAAAAAzM/gfxu3AKjZaA/s320/menu5-namkna-blogspot-com.gif);  padding: 8px 0 0 10px; }