Menu ngang đẹp cho Blogger

Thực sự tôi đã kiếm tìm kiểu menu này từ rất lâu. Tìm hiểu cũng nhiều nhưng mỗi người giải thích một kiểu khác nhau. Tuy vậy, đó cũng là một quá trình mà tôi học hỏi được rất nhiều điều về Code và tùy biến nó linh hoạt hơn.
Demo -> Bạn xem phần menu của tôi.
Để tạo menu như vậy, bạn làm theo các bước sau.
Bước 1: Vào phần chỉnh sửa HTML -> Ctrl +F -> Tìm thẻ </head> và chèn trên nó đoạn code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> </pre><pre style="padding: 0px; border: 0px; text-align: left; "><font color="#555555"><span style="line-height: 18px;"><script type="text/javascript"><br />$(document).ready(function() {<br /><br /> $("ul#topnav li").hover(function() { //sự kiện khi đưa chuột vào menu<br /> $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item<br /> $(this).find("span").show(); //hiễn thị menu cấp 2<br /> } , function() { //on hover out...<br /> $(this).css({ 'background' : 'none'});<br /> $(this).find("span").hide(); //ẩn menu cấp 2<br /> });<br /><br />});<br /></script> </span></font></pre><pre style="padding: 0px; border: 0px; color: rgb(85, 85, 85); font-size: 13.333333969116211px; line-height: 18.88888931274414px; text-align: left; "> 

Bước 2: Tìm đến thẻ ]]></b:skin> rồi thêm vào trước nó đoạn code

ul#topnav { margin: 0; padding: 0; float: left; width: 970px; list-style: none; position: relative; /*--thiết lập vị trí của ul chưa menu--*/ font-size: 1.2em; background: url(topnav_stretch.gif) repeat-x; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #555; /*-- các menu li --*/ } ul#topnav li a { padding: 10px 15px; display: block; color: #f0f0f0; text-decoration: none; } ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; } ul#topnav li span { float: left; padding: 15px 0; position: absolute; left: 0; top:35px; display: none; /*-- mặc định menu cấp 2 là ẩn --*/ width: 970px; background: #1376c9; color: #fff; /*--Bottom right rounded corner--*/ -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; /*--Bottom left rounded corner--*/ -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } ul#topnav li:hover span { display: block; } /*--hiển thị menu cấp 2 khi đưa chuột vào--*/ ul#topnav li span a { display: inline; } /*-- tất cả các menu câp 2 cùng nằm trên 1 dòng--*/ ul#topnav li span a:hover {text-decoration: underline;}

Bước 3: Chỉnh sửa các thông số cho phù hợp Bước 4: Lưu mẫu Bước 5: Vào phần tử trang -> Add Widget/HTML -> Dán đoạn code sau vào phần nội dung

<ul id="topnav"> <li><a href="#">Link 1</a></li> <li> <a href="#">Link 2</a> <!--Subnav Starts Here--> <span> <a href="#">Subnav Link 2</a> | <a href="#">Subnav Link 2</a> | <a href="#">Subnav Link 2</a> </span> <!--Subnav Ends Here--> </li> <li><a href="#">Link 3</a></li> </ul>

Bước 6: Lưu lại. Chú ý: Ở đây tôi chỉ làm 3 cái. Nếu bạn muốn làm nhiều hơn thì cứ Copy và Paste thêm vào. Nếu thêm một thì copy cái code link 1. Nếu muốn có submenu thì copy cái phần code Link 2.