Hướng Dẫn Tạo Thanh Menu Ngang Cho Blog

Đây là hướng dẫn dành cho các bạn tạo blog mà khi chọn mẫu (theme) không có menu ngang.
Đối với các bạn có blog sử dụng theme có menu sẵn rồi, mà muốn chỉnh sửa menu, các bạn có thể đọc bài viết tại ĐÂY.

Bước 1: Đăng nhập Blog, chọn Bố Cục

Tiếp theo hãy vào phần tiện ích:

Khi click vào Thêm Tiện Ích bạn kéo xuống phần. HTML/Javascript. Bây giờ hãy click vào nút + để thêm code vào:

Nội dung đoạn code cần thêm:

<style>
#bt4unavmenu{height:46px;display:block;overflow:hidden;padding:5px 0;margin-bottom:6px;border:1px solid #333;-moz-border-radius:07px; -khtml-border-radius:07px;-moz-border-radius:15px; -khtml-border-radius:15px;box-shadow:0px 0px 15px #252525;
-webkit-box-shadow:0px 0px 10px #252525;
-moz-box-shadow: 0px 0px 10px #252525;background:#222 url() left top repeat-x}
#bt4unavmenu .current-cat a{background:#4AA02C url() top left repeat-x;color:#FFF;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #111}
#bt4unav a,#subMenusContainer a{text-decoration:none;display:block}
#bt4unav a{margin:0;float:left;background:none;padding:15px 15px 15px 15px;color:#fff;text-transform:uppercase;font-weight:bold;font-size:12px;border:1px solid #222}
#bt4unav li a:hover,#bt4unav li a:focus,#bt4unav a.mainMenuParentBtnFocused{background:#8eda22 url() top left repeat-x;color:#fff;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #333}
#bt4unav,#bt4unav ul,#bt4unav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#bt4unav ol,#bt4unav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#bt4unav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 4px;height:44px;display:inline;background:url() left center no-repeat}
#bt4unav li:first-child{background:none;padding:0 2px 0 0}
#bt4unav{width:940px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
</style>
 <ul class='menu' id='menu-main'>
 <li><a href='https://phanmemhay24.blogspot.com/'>Trang Chủ</a>
<ul class='sub-menu'>
 <li><a href='#'>Sơ Đồ Trang</a></li>
<li><a href='#'>Giới Thiệu</a></li>
</ul>
</li>
 <li><a href='#'>Danh mục</a>
<ul class='sub-menu'>
 <li><a href='#'>Menu con</a></li> <li><a href='#'>Menu con</a></li> <li><a href='#'>Menu con</a></li><li><a href='#'>Menu con</a></li></ul>
</li>
 <li><a href='#'>Danh mục</a>
<ul class='sub-menu'>
 <li><a href='#'>Menu con</a></li><li><a href='#'>Menu con</a></li>
 <li><a href='#'>Menu con</a></li><li><a href='#'>Menu con</a></li></ul>
</li>
<li><a href='#/'>Danh mục</a>
<ul class='sub-menu'>
 <li><a href='#'>Menu con</a></li> <li><a href='#'>Menu con</a></li> <li><a href='#'>Menu con</a></li><li><a href='#'>Menu con</a></li></ul>
</li>
<li><a href='#'>Danh mục</a>
<ul class='sub-menu'>
 <li><a href='#'>Menu con</a></li> <li><a href='#'>Menu con</a></li> <li><a href='#'>Menu con</a></li><li><a href='#'>Menu con</a></li></ul>
</li>
<li><a href='#'>Danh mục</a>
<ul class='sub-menu'>
 <li><a href='#'>Menu con</a></li> <li><a href='#'>Menu con</a></li> <li><a href='#'>Menu con</a></li><li><a href='#'>Menu con</a></li></ul>
</li>
<li><a href='#'>Danh mục</a>
<ul class='sub-menu'>
 <li><a href='#'>Menu con</a></li> <li><a href='#'>Menu con</a></li> <li><a href='#'>Menu con</a></li><li><a href='#'>Menu con</a></li></ul>
</li></ul>

Các phần bôi màu đậm dùng để thay đổi nội dung thanh Menu. Các bạn đọc thêm cách thay đổi nội dung, hoàn thiện thanh Menu tại ĐÂY.

Sau khi bấm lưu, các bạn quay lại kiểm tra kết quả.
Chúc các bạn thành công!