Cách tạo menu dọc trên sidebar

 humghn.com 

Trong bài viết này , chuyên mục sẽ giới thiệu tới các bạn cách tạo menu dọc trên sidebar bằng việc thêm tiện ích HTML/JavaScript . Với cách thêm menu như vậy ,các bạn có thể sắp xếp thứ tự các mục như mong muốn và sở thích của các bạn .

Không những vậy , với cách tạo menu dọc này các bạn cũng có thể thay đổi màu sắc , tông nền của thanh menu để phù hợp với thiết kế chung trong blog/website của bạn . 
DEMO

Main Menu

Trang ChủPhim OnlineEdit

Cách thực hiện :

Bước 1 : Các bạn đăng nhập blogspot . Chọn " Bố cục  => Thêm tiện ích => HTML/JavaScrip "

Bước 2 : Các bạn dán đoạn mã sau vào HTML/JavaScrip mới tạo 

<style type="text/css">
/* Made By AllBlogTools.com */
#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #3CE612; /* Menu Font Color */
background-color: #9C12E6; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none; 
}
* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}
#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #A204C1; /*Left border color On Hover*/
}
#ddblueblockmenu div.menutitle{
color: #CA12E6; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #24EDEA;  /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By AllBlogTools.com */
</style>
<div id="ddblueblockmenu">
<div class="menutitle">Main Menu</div>
<ul><a href="http://themeblogspot247.blogspot.com/">Trang Chủ</a>
<a href="http://themeblogspot247.blogspot.com/">Thủ Thuật Blogspot</a>
<a href="#">Edit</a> 
</div>
</div>

Đoạn mã được in xanh , các bạn có thể thay đổi đường dẫn và tên thư mục như mong muốn . Để thêm thêm các mục , các bạn tiếp tục copy y nguyên đoạn code màu xanh và dán vào ngay sau các code màu xanh vừa copy . Sau đó đổi đường dẫn và đổi tên thư mục là được

Bước 3 : Tùy chỉnh màu sắc như mong muốn

Để biết mã tùy chỉnh , các bạn nhấp vào đây

Sau khi chọn được mã màu ưa thích , các bạn tìm đến đoạn code sau ( trong đoạn mã phía trên )

background-color: #2175bc; /*Menu background Color */ 

Bạn thay thế mã màu " #2175bc " thành mã màu ưa thích của bạn .
Chúc các bạn thành công !