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

#Thủ Thuật #Windows #Blogger #Facebook

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

Share:
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 &gt;header{padding:0}
.logo{display:inline-block;font-size:0;padding:0}
a.logo{color:#fff;font-family:&quot;Roboto Condensed&quot;,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 &gt;li{display:inline-block;padding:0}
#main-menu &gt;li &gt;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 &gt;li:hover &gt;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 &gt;li &gt;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 &gt;li &gt;a:last-child{border-bottom:none}
ul.sub-menu &gt;li &gt;a:hover{color:#66689c}
ul.sub-menu ul.sub-menu &gt;li{border:0}
#main-menu li:hover &gt;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.

CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.