Hướng dẫn tạo menu dọc cho blogger bằng CSS

Menu dọc bằng css thường được đặt ở vị trí bên trái hoặc bên phải với màu nền có thể thay đổi, dưới đây là chi tiết các bước tạo menu dọc cho Blogger cực đẹp.

Bước 1: Đăng nhập vào Blogger > Template > Edit HTML
Bước 2: Tìm kiếm "]]></b:skin>" dán đoạn code dưới đây trước "]]></b:skin>"

Mẫu 1:

#menu1 {
 width: 190px;
 margin: 0;
        padding: 0;
}
#menu1 ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#menu1 li a {
 height: 32px;
 font-family: Arial, Verdana, sans-serif;
 margin: 0;
 font-size: 12px;
 font-weight: bold;
 background: #FFF;
 height: 24px;
 text-decoration: none;
 }
 #menu1 li a:hover {
 width: 180px;
 color: #003F57;
 border-radius: 0 5px 5px 0;
 background: #57D0FF;
 padding: 7px 0 0 20px;
}
#menu1 li a:link, #menu1 li a:visited{
 width: 190px;
 color: #FFFFFF;
 display: block;
 background: #00B7FF;
 border-top: 1px solid #FFFFFF;
 border-bottom: 1px solid #00425B;
 border-radius: 0 5px 5px 0;
 padding: 7px 0 0 20px;
}
#menu1 li #current, #menu1 li a:active{
 color: #FFFFFF;
 background: #FF4400;
 padding: none;
}

Mẫu 2:

 #menu2 {
 width: 190px;
 margin: 0;
        padding: 0;
}
#menu2 ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#menu2 li a {
 height: 32px;
 font-family: Arial, Verdana, sans-serif;
 margin-bottom: 5px;
 font-size: 12px;
 font-weight: bold;
 background: #FFF;
 height: 24px;
 text-decoration: none;
 }
 #menu2 li a:hover {
 width: 190px;
 color: #6A2900;
 border-radius: 5px 5px 5px 5px;
 background: #FF863A;
 padding: 7px 0 0 25px;
}
#menu2 li a:link, #menu2 li a:visited{
 width: 190px;
 color: #FFFFFF;
 display: block;
 background: #FF6200;
 border-top: 1px solid #FFFFFF;
 border-bottom: 1px solid #00425B;
 border-radius: 5px 5px 5px 5px;
 padding: 7px 0 0 20px;
}
#menu2 li #current, #menu2 li a:active{
 color: #FFFFFF;
 background: #FF4400;
 padding: none;
}

Chú ý: Các bạn có thể thay đổi màu sắc menu Backgroup với các mã màu sau: #57D0FF, #00B7FF, #FF863A, #FF6200