Chia sẻ thanh Menu tích hợp khung tìm kiếm tuyệt đẹp cho Blogspot

Chào các bạn, lục lại trong template cũ của mình, thấy còn cái menu. Mình mang ra chỉnh sửa tí CSS lại và mang đi chia sẻ cho các bạn, thanh menu này có tích hợp sẵn khung tìm kiếm, 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.