Tạo thanh menu ngang cho Blog

Nếu các bạn đã theo dõi các bài viết về blog như cách tạo blog và chèn bộ đếm vào blog cùng với nó thu thuat blog, tiếp theo là đăng ký blog tiếp theo hôm này AdZone xin giới thiệu với các bạn thêm một cách điều hướng khác giúp cho công việc thiet ke web của bạn đơn giản hơn, cũng giúp bạn có một blog khá chuyên nghiệp, đó là thanh menu ngang kiểu như thế  này.

Và hôm nay chúng ta bắt đầu tiến hành từng bước một để có một thanh menu điều hướng khách hàng khi khách hàng viếng thăm một cách hiệu quả.

BẮT ĐẦU TẠO MENU NGANG CHO BLOG CỦA BẠN THÔI.

Đầu tiên hãy đăng nhập blog.

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 Menu ngang xin copy dưới đây.

<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>
<div id='bt4unavmenu'>
<ul id='bt4unav'>
<li class='current-cat'><a href='http://freewebsvn.blogspot.com/'>Home</a></li>
<li><a href='http://www.seobenvung.com/seo-ben-vung'>Giới Thiệu</a></li>
<li><a href='http://freewebs.vn/category/hang-free'>Liên Kết</a></li>
<li><a href='http://www.seobenvung.com/'>SEO Free</a></li>
<li><a href='http://freewebs.vn/'>Freewebs</a></li>
<li><a href='http://freewebs.vn/lien-he-voi-chung-toi'>Liên hệ</a></li>

</ul>
</div>

Chú ý các đoạn sau các bạn có thể thay thế tùy thích như

<li class='current-cat'><a href='http://freewebsvn.blogspot.com/'>Home</a></li>
<li><a href='http://www.seobenvung.com/seo-ben-vung'>Giới Thiệu</a></li>
<li><a href='http://freewebs.vn/category/hang-free'>Liên Kết</a></li>
<li><a href='http://www.seobenvung.com/'>SEO Free</a></li>
<li><a href='http://freewebs.vn/'>Freewebs</a></li>
<li><a href='http://freewebs.vn/lien-he-voi-chung-toi'>Liên hệ</a></li>

• #4AA02C là mã màu của nút home
• #222 là màu của menu
• #8eda22 là màu của các menu khi dê chuột vào

Sau khi bấm Lưu các bạn quay ra kiểm tra kết quả

Và giờ ta có menu như ý rồi.