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.

Blog là dịch vụ có host mien phi của google va cách tao web mien phi cũng khá đơn giản hy vọng bạn đã có một web mien phi trên dịch vụ của google và bây giờ bắt tay vào làm thanh menu blog của bạn.

Đầ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='https://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='https://freewebs.vn/'>Freewebs</a></li>
<li><a href='https://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='https://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='https://freewebs.vn/'>Freewebs</a></li>
<li><a href='https://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.

Hy vọng qua bài viết này bạn sẽ thiet ke web mien phi được blog của mình một cách chuyên nghiệp, cùng với nó bạn hãy sử dụng dich vu seo để giúp blog của bạn có thứ hạng cao trong kết quả tìm kiếm.