Responsive Menu có khung tìm kiếm cho blogspot (sử dụng Jquery)

Bạn có thể xem Demo hình ảnh bên dưới hoặc DEMO
Trước khi thực hiện, sao lưu lại template và phải đảm bảo là template của bạn đã cài đặt thư viện Jquery

Desktop View

Mobile View

CSS Code

Thêm đoạn CSS sau vào trước thẻ ]]></b:skin> hoặc </style>:

/*----- Toggle Button -----*/
.toggle-nav{display:none}
@media screen and (min-width:720px){.menu{width:100%;box-shadow:0 1px 1px rgba(0,0,0,0.15);background:#303030}}
.menu ul{display:inline-block;margin: 10px 0 5px 10px;padding-left:0;}
.menu li{margin:0 20px 0 0;float:left;list-style:none;font-size:17px}
.menu li:last-child{margin-right:0}
.menu a{text-shadow:0 1px 0 rgba(0,0,0,0.5);color:#999;transition:color linear 0.15s}
.menu a:hover,.menu .current-item a{text-decoration:none;color:#66a992}
/*----- Search -----*/
#search-form{float:right;display:inline-block;padding-top: 4px;  padding-right: 5px}
#search-form input{width:200px;height:30px;padding:0 8px;float:left;border-radius:2px 0 0 2px;font-size:13px;margin: 0px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; border: 0px; font-size: 100%;  font: inherit;}
#button-submit{width: auto!important;height:30px;padding:0 8px;float:right;border-radius:0 2px 2px 0;background:#66a992;font-size:13px;font-weight:600;text-shadow:0 1px 0 rgba(0,0,0,0.3);color:#fff}
/*----- Responsive -----*/
@media screen and (max-width:1150px){.wrap{width:90%}}
@media screen and (max-width:970px){.search-form input{width:120px}}
@media screen and (max-width:720px){.menu{position:relative;display:inline-block;  width: 100%;background:#37474F;}.menu ul.active{display:none}.menu ul{width:100%;position:absolute;top:95%;left:0;padding:10px 18px;box-shadow:0 1px 1px rgba(0,0,0,0.15);background:#303030}.menu ul:after{width:0;height:0;position:absolute;top:0%;left:22px;content:'';transform:translate(0%,-100%);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #303030}.menu li{margin:5px 0 5px 0;float:none;display:block}.menu a{display:block}.toggle-nav{padding:6px 20px;float:left;display:inline-block;box-shadow:0 1px 1px rgba(0,0,0,0.15);background:#303030;text-shadow:0 1px 0 rgba(0,0,0,0.5);color:#777;font-size:20px;transition:color linear 0.15s}.toggle-nav:hover,.toggle-nav.active{text-decoration:none;color:#66a992}#search-form input{box-shadow:-1px 1px 2px rgba(0,0,0,0.1)}}
  @media screen and (max-width:480px){.toggle-nav{padding:6px 10px}#search-form input{width:150px;}}
/* <----Finish menu */

HTML code

Thêm đoạn HTML sau vào bên trên thẻ <header> hoặc bên dưới </header>, phụ thuộc vào template bạn đang sử dụng:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class='menu' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
    <ul class='active'>
        <li class='current-item'><a href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
  <li><a href='https://showtricks.blogspot.com/' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
  <li><a href='https://showtricks.blogspot.com/p/contact.html' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
  <li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
  <li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
    </ul>
    <a class='toggle-nav' href='#'>&#9776;</a>
 <form action='/search' autocomplete='off' id='search-form' method='get'>
<input name='q' placeholder='Search here...' size='15' type='text'/>
<input id='button-submit' type='submit' value='Search'/>
</form>
</nav>

Nếu template đã cài sẵn thư viện Jquery thì xóa bỏ đoạn màu vàng đi

Javascript

Thêm đoạn Script sau vào trước thẻ đóng </body>

<!-- mainmenu -->
<script type='text/javascript'>
//<![CDATA[     
jQuery(document).ready(function() {
 jQuery('.toggle-nav').click(function(e) {
  jQuery(this).toggleClass('active');
  jQuery('.menu ul').toggleClass('active');

  e.preventDefault();
 });
});
//]]>
</script>