Tạo thanh menu ngang cho BlogSpot

Menu là một thành phần không thể thiếu đối với bất kỳ weblog nào, giúp cho người đọc dễ dàng truy cập đến chủ đề quan tâm. Chính vì tính hữu ích và quan trọng nên có rất nhiều các thủ thuật hướng dẫn các bạn tạo menu cho Blogger, ở đây mình xin giới thiệu với các bạn cách tạo 1 menu theo chiều ngang cho Blogger.

Các bước tạo menu điều hướng theo chiều ngang:

1. Truy cập vào Blogger : Bảng điều khiển (Dashboard)  >> Bố cục (Layout)  >>  Phần tử trang (Page Element)  >> Click vào Thêm tiện ích (Add a Gadget).

2. Click chọn tiện ích  HTML/JavaScript widget và dán  Navigation Menu Code dưới đây vào trong khung nội dung của HTML/JavaScript widget .

<style> 
#tabs6 img { border: none; } 
#tabs6 { float:left; width:100%; background:#transparent; font: bold 13pt Verdana; line-height:normal; border-bottom:1px solid #666; } 
#tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } 
#tabs6 li { display:inline; margin:0; padding:0; } 
#tabs6 a { float:left; background:url(https://lh3.googleusercontent.com/-sm_U8uUzjrw/UJ_F_qK77II/AAAAAAAAGWk/hR-UxsIQdDA/s84/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } 
#tabs6 a span { float:left; display:block; background:url(https://lh6.googleusercontent.com/-8vhC84N-afw/UJ_GA6jI8QI/AAAAAAAAGWs/aGqzK0vCSYg/s175/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } 

/* Commented Backslash Hack hides rule from IE5-Mac \*/
 
#tabs6 a span {float:none;} /* End IE5-Mac hack */ 
#tabs6 a:hover span { color:#FFF; } 
#tabs6 a:hover { background-position:0% -42px; } 
#tabs6 a:hover span { background-position:100% -42px; } 
#tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } 
</style> 
<div id="tabs6"> 
<ul> 
<li><a href="http://www.blogger.com/home"><span>Inbox</span></a></li> 
<li><a href="testpage-bnll.blogspot.com"><span>Homepage</span></a></li> 
<li><a href="http://testpage-bnll.blogspot.com/search/label/Blog-Entries"><span>Blog Entries</span></a></li> 
<li><a href="http://testpage-bnll.blogspot.com/search/label/Reviews"><span>Reviews</span></a></li> 
<li><a href="http://testpage-bnll.blogspot.com/search/label/Notes"><span>Notes</span></a></li> 
<li><a href="https://plus.google.com/101464152075299216945"><span>G+</span></a></li> 
<li><a href="http://www.blogger.com/blogger.g?blogID=8729305194769807381#allposts"><span>PostLocker</span></a></li> 
<li><a href="http://www.youtube.com/user/hinhnhanlangle?feature=guide"><span>Videos</span></a></li> 
</ul> 
</div>

3. Kéo HTML/JavaScript widget và thả  vào vị trí phía dưới Blog Header.

4. Sau khi đã thực hiện xong các bước trên, bạn cần chỉnh lại link liên kết hiển thị trong đoạn mã HTML. Thay đổi các nội dung được tô màu đỏ trong đoạn code theo nhu cầu của bạn. Tùy chỉnh giá trị 50px trong dòng lệnh này

#tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; }

để có được vị trí thanh Menu như mong muốn trên giao diện của trang: lệch về trái, lệch về phải hay canh đều.

- Thay thế các tiêu đề và đường link của các menu bạn chỉ cần thay đổi các dòng in đậm trọng đoạn code định dạng như dưới:

<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>

- Thay thế  #1, #2, #3 etc bằng các địa chỉ  Page Links/URL và thay thế  Link 1, Link 2, Link 3 etc bằng Tên các Page Link như mình đã làm với đoạn code ở trên.

- Nếu cần thêm hay xóa đi các tab (link) bạn chỉ cần thêm hoặc xóa đi đoạn code HTML dưới:

<li><a href="#" >Link</a></li>

Lưu tiện ích và xem kết quả.