CHIA SẺ THANH MENU TÍCH HỢP KHUNG TÌM KIẾM TUYỆT ĐẸP CHO BLOGSPOT

Chào các bạn, mình thấy bác sĩ windows chia sẽ một thanh menu , hy vọng các bạn sẽ  thích nó :D

CÁC BƯỚC THỰC HIỆN

Bước 1. Đăng nhập Blogger ➔ Mẫu ➔ Chỉnh sửa HTML.
Bước 2. Chèn đoạn CSS sau vào trước thẻ ]]></b:skin> hoặc </style> trong template.

#wrap{margin:0 auto}
.inner{margin:0 auto;width:1280px;padding:0}
.relative{position:relative}
.right{float:right}
.left{float:left}
#wrap >header{padding:0}
.logo{display:inline-block;font-size:0;padding:0}
a.logo{color:#fff;font-family:"Roboto Condensed",sans-serif;font-size:36px;font-weight:700;line-height:60px}
#navigation{width:1280px;margin:auto}
#menu-toggle{display:none;float:right}
#main-menu{font-size:0;margin:auto;width:1280px;display:inline}
#main-menu >li{display:inline-block;padding:0}
#main-menu >li >a{border-top:2px solid transparent;color:#4e508a;text-decoration:none;font:700 18px Roboto Condensed;text-transform:uppercase;line-height:50px;display:block;position:relative;padding:0 15px}
#main-menu >li:hover >a{border-top:2px solid #66689c;color:#66689c}
#main-menu li a:focus{background-color:#f4f4f4}
#main-menu li{position:relative}
ul.sub-menu{opacity:0;visibility:hidden;left:-35px;padding:10px 0 0 0;top:35px;position:absolute;width:200px;z-index:9999;transition:all .25s ease-in-out;transform:scale(.9)}
ul.sub-menu ul.sub-menu{margin:0;padding:0;left:180px;top:0}
ul.sub-menu >li >a{background-color:#fff;border:0;text-transform:uppercase;border-top:none;color:#666;line-height:15px;padding:15px 12px;font:700 18px Roboto Condensed;display:block}
ul.sub-menu >li >a:last-child{border-bottom:none}
ul.sub-menu >li >a:hover{color:#66689c}
ul.sub-menu ul.sub-menu >li{border:0}
#main-menu li:hover >ul.sub-menu{opacity:1;visibility:visible;box-shadow:0 15px 20px rgba(0,0,0,.1);transform:scale(1)}
#top-menu-bacsiwindows{background:#66689c;-webkit-user-select:none}
#bsw_menu{background:#fff}
.search_box_menu{display:inline;float:right}
#abt-search-btn{border:0;outline:0;background:transparent url(https://2.bp.blogspot.com/-_h0olpuMbZ0/WJQiK_-lleI/AAAAAAAACeo/-qP3JsZjVEwq8nnEyGFkuHo7J5HQMs3TACLcB/s1600/search-icon-black6gachblogttcn-blogspot-com.png) no-repeat center center;color:#fff;background-size:70%;padding:0 24px;line-height:50px;border-right:1px solid #ddd;cursor:pointer}
#abt-search-box{background:#FFF;border-left:1px solid #ddd;border-right:0;border-bottom:0;border-top:0;outline:0;border-radius:0;color:#666;padding:0 10px;font:400 18px Roboto;line-height:50px;float:left;margin:0;width:250px;letter-spacing:-.6px}

Bước 3. Chèn đoạn code sau vào nơi bạn muốn hiển thị thanh menu.

<div id='bsw_menu'>
<nav id='navigation'>
<ul id='main-menu'>
  <li><a href='/'><i class='fa fa-home'/></a></li>
  <li><a href='/p/about.html'>Giới thiệu</a></li>
  <li><a href='/p/contact.html'>Liên hệ</a></li>
  <li><a href='/p/lien-ket.html'>Liên kết</a></li>
  <li><a href='/p/comments.html'>Comments</a></li>
<li class='parent'>
<a href='//bacsiwindows.com/search/label/Thủ Thuật Máy Tính'>Thủ thuật máy tính<i class='fa fa-angle-down' style='margin:0 0 0 5px'/></a>
<ul class='sub-menu'>
<li><a href='//bacsiwindows.com/search/label/Thủ Thuật Máy Tính'>Thủ thuật máy tính</a></li>
<li><a href='//bacsiwindows.com/search/label/Thủ Thuật Internet'>Thủ thuật internet</a></li>
<li><a href='//bacsiwindows.com/search/label/Thủ Thuật Facebook'>Thủ thuật facebook</a></li>
<li><a href='//bacsiwindows.com/search/label/Thủ Thuật Youtube'>Thủ thuật youtube</a></li>
</ul></li>
<li class='parent'>
<a href='//bacsiwindows.com/search/label/Thủ Thuật Blogger'>Thủ thuật blogspot <i class='fa fa-angle-down' style='margin:0 0 0 5px'/></a>
<ul class='sub-menu'>
<li><a href='//bacsiwindows.com/search/label/Blogspot Widget'>Widget</a></li>
<li><a href='//bacsiwindows.com/search/label/CSS'>CSS</a></li>
<li><a href='//bacsiwindows.com/search/label/Javascript'>Javascript</a></li>
<li><a href='//bacsiwindows.com/search/label/Blogspot Menu'>Menu</a></li>
<li><a href='//bacsiwindows.com/search/label/Recent Post'>Recent Post</a></li>
<li><a href='//bacsiwindows.com/search/label/Related Post'>Related Post</a></li>
<li><a href='//bacsiwindows.com/search/label/Template Blogspot'>Template Blogspot</a></li>
</ul></li>
</ul>
<div class='search_box_menu'>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='abt-search-box' name='q' placeholder='Nhập từ khóa tìm kiếm' size='40' type='text'/>
<input id='abt-search-btn' type='submit' value=''/>
</form>
  </div>
</nav>
  </div>

Bước 4. Lưu mẫu.
Đây là mẫu menu đẹp và đơn giản, nếu bạn không thích nó bạn có thể xem thêm các mẫu menu khác tại đây.
Nguồn : Bác Sĩ Windows