K3nvil: Tạo thanh Drop Menu cố định trên đầu blog

Hôm nay mình xin giới thiệu các bạn tạo thanh Drop Menu cố định ở trên đầu trang blog.

1. Vào template chèn đoạn css sau phía trên thẻ ]]></b:skin>

#Breadcrumbs{background:#fff; border-radius: 5px; margin-bottom:10px; padding:3px 10px; box-shadow:1px 1px 2px 1px #333; } #topmenu-outer{z-index:30; height:20px;width:100%;background:#545454; color:#fff; text-shadow:1px 1px 1px #000; top:0px;right:0px; position:fixed;padding:5px;}
#topmenu{width:990px;margin:auto;}
#topmenu1{width:790px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px;    text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu {    list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center;    position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto;    position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none;padding:10px 5px;    }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {font-size:12px;    line-height:24px;position:relative;text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0;    float:none;text-align:left;width:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}

2. Tiếp tục chèn đoạn code sau vào bên dưới thẻ mở <body...> (dấu ... có thể khác nhau hoặc không có tùy blog)

3. Save template lại rồi về mục Phần tử trang bạn sẽ thấy xuất hiện một tiện ích HTML mới ở đầu blog. Bạn chèn đoạn code sau vào tiện ích HTML trên:

<ul class="menu"> <li class="drop0"><a href="http://k3nvil.blogspot.com/">Trang Chủ</a></li> <li class="drop0"><a href="http://k3nvil.blogspot.com/p/tong-hop.html">Tổng hợp</a></li> <li class="drop0"><a href="http://k3nvil.blogspot.com/p/chuyen-ma-code.html">Convert</a></li> <li><a class="drop" href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Document</a> <div class="drop1"> <ul> <li><a href="http://k3nvil.blogspot.com/search/label/D%E1%BB%B1%20to%C3%A1n%20c%C3%B4ng%20tr%C3%ACnh">Dự toán</a></li> <li><a href="http://k3nvil.blogspot.com/search/label/Design">Design</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Tài liệu</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Ứng dụng</a></li> </ul> </div> </li> <li><a class="drop" href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Entertainment</a> <div class="drop1"> <ul> <li><a href="http://k3nvil.blogspot.com/search/label/Gi%E1%BA%A3i%20tr%C3%AD">Giải trí</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Ảnh vui</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Video hài</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Truyện</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Muzik</a></li> </ul> </div> </li> <li><a class="drop" href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Thủ thuật</a> <div class="drop2"> <div class="col"> <h3> Blogspot</h3> <ul> <li><a href="http://k3nvil.blogspot.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Blog?&max-results=10">Thủ thuật blog</a></li> <li><a href="http://k3nvil.blogspot.com/search/label/Comments?&max-results=10">Comments</a></li> <li><a href="http://k3nvil.blogspot.com/search/label/Widget?&max-results=10">Widget</a></li> <li><a href="http://k3nvil.blogspot.com/search/label/Style%20Blog?&max-results=10">Style</a></li> <li><a href="http://k3nvil.blogspot.com/search/label/Basic?&max-results=10">Cơ bản</a></li> </ul> </div> <div class="col"> <h3> CNTT</h3> <ul> <li><a href="http://k3nvil.blogspot.com/search/label/Ki%E1%BA%BFn%20th%E1%BB%A9c%20IT?&max-results=10">Kiến thức IT</a></li> <li><a href="http://k3nvil.blogspot.com/search/label/Di%E1%BB%87t%20Virut?&max-results=10">Virut</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Phần mềm</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Phần cứng</a></li> </ul> </div> <div class="col"> <h3> Download</h3> <ul> <li><a href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Games</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Tải phần mềm</a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=8327430152519111955#">Tải tài liệu</a></li> </ul> </div> <div class="col"> <h3> Office</h3> <ul> <li><a href="http://k3nvil.blogspot.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Word%20%2B%20Excel?&max-results=10">Thủ thuật Word + Excel/a></a></li> </ul> </div> </div> </li> </ul>

Save lại là xem như hoàn thành.
4. Thay đổi code:

Đoạn code ở bước 2 thay k3nvil.blogspot.com thành địa chỉ blog của bạn.
Đoạn code ở bước 3 Trong đoạn code này chú ý 1 tí bạn sẽ thấy có 3 class lớn.
» drop0: là không drop menu.
» drop1: là menu drop 1 cột.
» drop2: là menu drop 2 cột
Bạn thay đổi nội dung cho phù hợp là được.

Nếu có vấn đề gì bạn để lại comments bên dưới mình sẽ hướng dẫn trong thời gian sớm nhất có thể. Chúc bạn thành công!