Tạo navbar với Bootstrap 3 cho blogspot

Như các bạn đã biết thư viện Bootstrap 3 rất đa dạng ngoài việc tạo các bố cục Reponsive cho webiste thì compoment của nó còn rất nhiều thứ rất hay. Trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn cho các bạn cách tạo Navbar cho blogspot thông qua thư viện Bootstrap 3 tạm gọi là Bootstrap Menu Generator thông qua một site trung gian giúp chúng ta có thể tùy biến màu sắc cũng như code trước khi đưa code vào website.

Tạo navbar với Bootstrap 3 cho blogspot

Bước 1: Đầu tiên bạn truy cập vào địa chỉ sau:http://bootstrap3-menu.codedorigin.com/#sthash.Vz7KuG1y.dpbs

Bước 2: Tùy chỉnh giao diện rất đơn giản như hình trên bạn có thể thấy

1. Phần trên của site là menu review giúp bạn có thể xem trước menu của mình như thế nào
2. Phần ở giữa là màu sắc: Có 3 cột là màu nền, màu viền và màu text bạn có thể thay đổi trực tiếp màu sắc tại đây
3. Phần cuối cùng: có 2 cột chứa HTML và CSS sau khi hoàn thành chỉnh sửa 

Bước 3: truy cập vào quản trị Blogger - Chủ đề - Chỉnh sửa HTML ở đây chúng ta có 2 code là CSS và HTML bạn copy và pase và đúng vị trí là xong. Bạn có thể lấy code bên dưới từ longanit đề sử dụng và tùy chỉnh nhé

Code CSS

 /*** mau nen thanh menu nav longanit.com ****/
.navbar-default {background-color:#0073aa}
.navbar {position: relative;min-height: 50px;margin-bottom: 0px!important; border: 1px solid transparent;}
.navbar-default .navbar-brand { color: #ffffff;}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #e5dbdb;}
.navbar-default .navbar-text {color: #d7e2e9;}
.navbar-default .navbar-nav > li > a {color: #ffffff;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {color: #e5dbdb;}
.navbar-default .navbar-nav > li > .dropdown-menu {background-color: #69899f;}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {color: #ffffff;}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {color: #e5dbdb;background-color: #425766;}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {background-color: #69899f;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color: #e5dbdb;background-color: #425766;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {color: #e5dbdb;background-color: #425766;}
.navbar-default .navbar-toggle {border-color: #425766;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color: #425766;}
.navbar-default .navbar-toggle .icon-bar {background-color: #d7e2e9;}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {border-color: #d7e2e9;}
.navbar-default .navbar-link {color: #d7e2e9;}
.navbar-default .navbar-link:hover {color: #e5dbdb;}
 @media (max-width: 767px)
.navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #fff;}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #fff;}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {color: #e5dbdb;}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {color: #e5dbdb;background-color: #425766; }
}

Code HTML cho Menu

<nav class='navbar navbar-default' id='menu'>
<div class='container-fluid'>
<div class='row'>
<div class='navbar-header'>
<button aria-expanded='false' class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='https://www.longanit.com/'>LongAnIT</a>
</div>
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='https://www.longanit.com/'>Trang chủ <span class='sr-only'>(current)</span></a></li>
<li><a href='https://www.longanit.com/p/gioi-thieu.html'>Giới thiệu</a></li>
<li><a href='https://www.longanit.com/p/rules.html'>Quy định</a></li>
<li><a href='https://www.longanit.com/p/contact.html'>Liên hệ</a></li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='' role='button'>Web Tools <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.longanit.com/p/css.html'>Tool CSS </a></li>
<li class='divider' role='separator'></li>
<li><a href='https://www.longanit.com/search/label/Reponsive'>Reponsive </a></li>
</ul>
</li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='https://www.longanit.com' role='button'>Blogger <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.longanit.com/search/label/Blogging tips'>Blogging tips</a></li>
<li><a href='https://www.longanit.com/search/label/Widgets'>Widgets</a></li>
<li class='divider' role='separator'></li>
<li><a href='https://www.longanit.com/search/label/Templates'>Templates</a></li>
<li class='divider' role='separator'></li>
<li><a href='https://www.longanit.com/search/label/Bootstrap'>Bootstrap</a></li>
</ul>
</li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='https://www.longanit.com' role='button'>SEO<span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.longanit.com/search/label/SEO'>SEO Tips </a></li>
<li><a href='https://www.longanit.com/search/label/SEO Onpage'>SEO Onpage</a></li>
<li><a href='https://www.longanit.com/search/label/SEO Offpage'>SEO Offpage </a></li>
</ul>
</li>
</ul>
<ul class='nav navbar-nav navbar-right'>
<li><a href='http://longanit.forumvi.com/'>Diễn đàn</a></li>
<li><a href='https://www.longanit.com/p/backlink.html'>Liên kết</a></li>
<li><a href='https://www.longanit.com/p/sitemap.html'>Sitemap</a></li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='' role='button'>Admin <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.blogger.com'>Login</a></li>
<li class='divider' role='separator'></li>
<li><a href='#'>Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>

Kết luận: Qua bài viết trên tôi đã hướng dẫn các bạn cách cơ bản để tạo cho blogspot một Menu Reponsive rất đẹp mắt. Bạn có thể xem thêm tại link trang chủ của bài viết: https://getbootstrap.com/docs/3.3/components/#navbar

Chúc các bạn thành công và SEO nhanh lên top nhé!

Warning! Hãy để lại bình luận bên dưới nếu cần hỗ trợ.