Cập nhật thêm mẫu menu dọc cho blogspot

 humghn.com 

Trong các bài viết trước , chuyên mục đã hướng dẫn các bạn cách tạo menu dọc cho blogspot , nhưng các mẫu menu dọc đó vẫn còn quá ít nên các bạn có khá ít sự lựa chọn . Trong bài viết lần này , chuyên mục sẽ giới thiệu thêm một số mẫu menu dọc phổ thông khác cho blogspot để làm phong phú thêm cho sự lựa chọn của các bạn .
DEMO

• Tên hiển thị 1
• Tên hiển thị 2
• Tên hiển thị 3
• Tên hiển thị 4
• Tên hiển thị 5

Các bước thực hiện
Bước 1 : Đăng nhập Blogspot , chọn " Mẫu " , sau đó chọn " Chỉnh sửa HTML "
Bước 2 : Thêm đoạn mã dưới đây và trước thẻ ]]></b:skin>

#navcontainer { background: #666666;  width: 100%; margin: 0 auto; padding:0em 0; font-family: georgia,  serif; font-size: 15px; text-align: center; text-transform: uppercase; }


ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0  auto; width: 100%; }
ul#navlist li { display: block; margin: 0; padding:  0; }


m 0 1em  1em; border-width: 2px; border-color: #ffe #aaab9c #ccc #fff;  border-style: solid; color: #777; text-decoration: none; background: #000000; }

#navcontainer>ul#navlist li a { width: auto; } ul#navlist
ul#navlist li a { display: block; width: 100%; padding: 1
e li#active a { background: #f0e7d7; color: #800000; }


olor: #0bd500; background: #2c7f0c; border-color: #aaab9c #fff #fff #ccc; }
ul#navlist li a:hover, ul#navlist li#active a:hover { 
c

Trong đó:

+ background: #666666 là màu của Menu. Các bạn có thể thay đổi màu tùy chỉnh bằng cách thay đoạn mã #666666 thành một trong các mã màu tại đây

+ Nếu muốn chữ viết trên menu dạng in thường thay vì in hoa như Demo thì bạn xóa đoạn code sau: text-transform: uppercase;

Bước 3 : Nhấp lưu lại

Bước 4 : Vào " Bố cục " và tạo thêm thẻ " HTML/JavaScrip và dán vào đó đoạn mã sau

<div id="navcontainer">
<ul id="navlist">


Link URL">Tên hiển thị 1</a></li>
<li><a href=
"


li><a href="Link URL">Tên hiển thị 2</a></li>
<<li><a href="Link URL">Tên hiển thị 3</a></li>


li><a href="Link URL">Tên hiển thị 5</a></li>
<li><a href="Link URL">Tên hiển thị 4</a></li>

<</ul>


</div>

Bạn thay Link URL bằng đường dẫn của nhãn ( hay của bất kì cái gì tùy bạn )

Thay " Tên Hiển Thị " bằng tên thư mục bạn muốn đặt 

Vậy là chuyên mục đã hướng dẫn các bạn cách tạo menu dọc cho blog/website của bạn . Chúc các bạn thành công