Responsive Menu với ô tìm kiếm cho Blogger

Responsive Menu với ô tìm kiếm cho Blogger

Bạn có thể xem Demo hình ảnh bên dưới hoặc tại đây
Đây là menu cho Blogspot giống kiểu kompiflexible, được lược bỏ bớt phần menu bên trái

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 font Awesome

Desktop View

Mobile Menu

CSS Code

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

.btn-sosial ul,ol,ul{list-style:none}
div,li,ul{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
#menu-container,.menu,.menu-search{transition:all .4s ease-in-out}
.wrap-menu{margin:0 auto;padding:0;width:100%;height:auto}
#menu-container{background:#000;margin:0 auto;padding:0;position:fixed;top:0;left:0;z-index:999;width:100%;height:auto}
.menu,.menu-search{padding:0;display:inline}
.menu,.menu-search,.btn-sosial a{color:#efefef;font-weight:400}
.clear{clear:both!important}
.mobile-menu-ikon{margin:0;color:#fff;font-size:30px;cursor:pointer;display:none}
.menu{float:left;margin-top:6px;margin-left:5px;margin-right:20px;font-size:30px;cursor:pointer}
.menu-search{float:right;margin-top:11px;margin-right:5px;font-size:20px;cursor:pointer}
#close-icon{display:none;margin-left:3px;}
.btn-sosial{float:right;margin-top:13px;margin-right:10px}
.btn-sosial li{float:left;display:inline-block;margin-right:10px}
.btn-sosial a:hover{color:red!important}
.menu-search:hover,.menu:hover,#close-icon:hover{color:red}
#search-box{position:absolute;top:38px;right:0;width:300px;display:none;height:27px;border-right:none;padding:0;margin:0;}
#search-box form{background:#000;padding:10px;position:relative}
#search-box form,#search-form,.search-button{border:none;line-height:27px}
#search-form{color:gray;width:100%;padding:0 10px 0 30px;height:27px;line-height:27px;font-size:14px;font-family:Roboto,sans-serif;font-weight:300;margin:0;-moz-box-sizing:border-box;box-sizing:border-box}
.search-button{width:30px;padding:0;text-align:center;margin:0;top:10px;left:10px;font-size:16px;color:#888;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}
.tombol:after,.tombol:before{color:#000;text-shadow:0 1px 0 #999}
#search-form:focus,#search-form:hover,.search-button:focus,.search-button:hover{border:none;outline:0;color:#000}
.page-menu ul li{list-style:none}
.page-menu ul li{display:inline-block;transition:all 400ms ease-in-out}
.page-menu{float:left;width:auto;height:auto;padding:0!important;margin:0 5px;font-size:90%;font-weight:400}
.page-menu ul{margin:0 auto!important;padding:0!important;line-height:3em}
.page-menu ul li a:hover{color:#e8554e!important}
.page-menu ul li a{color:#fff!important;padding:0 20px 0 0;    text-decoration: none;}
.page-menu ul li a img{vertical-align:middle!important}

@media screen and (max-width:612px){
  .page-menu ul{line-height:1.7em}
.mobile-menu-ikon{padding-left:10px;}
#search-box,.page-menu,.btn-sosial{float:none}
#search-box,#search-box form{position:relative;right:0;width:100%}
#search-box form{background:0 0}
#css-menu,.search-button{top:0;left:0}
#menu-container{background:#181818;position:relative;}
#header-wrapper{margin:0 auto 25px}
.mobile-menu-ikon{display:block}
.mobile-menu-nav ul li a:hover{color:#e8554e!important}
.mobile-menu-nav ul li{list-style:none;display:block;transition:all .4s ease-in-out;text-align:left;border-top:solid 1px #242424;border-bottom:solid 1px #000}
.mobile-menu-nav{width:100%;padding:0 10px 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-boxmargin:10px auto 0;border-top:1px solid #000;border-left:none;border-right:none;float:none;display:none}
#search-box{display:block}
.mobile-menu,.mobile-menu-nav ul{padding:0!important}
.btn-sosial{margin-top:10px;margin-right:0;}
#search-box form{display:block;top:0;margin:15px auto}

.menu,.menu-search{display:none}
.page-menu{width:100%;height:auto;padding:0!important;margin:0;font-size:16px;font-weight:400}
#search-box{top:0;}
#search-box form{padding:0}
.mobile-menu-nav .btn-sosial ul li{border-top:none}
}
@media screen and (max-width:480px){
.mobile-menu-ikon{padding-left:15px;}
.mobile-menu-nav{padding:0 15px 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}}
@media screen and (max-width:414px){.mobile-hide{display:none}}
@media print{#css-menu.wrap-menu,#menu-container{display:none!important}}

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:

<div class='wrap-menu'>
<div id='menu-container'>
<div class='content-wrapper'>
<div class='mobile-menu-ikon' onclick='openMobilemenu()'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC9JREFUeNpi/P//PwM1AQsQU9VEJgYqg8FvICgMGUeel0eTzWiyGU02Qz/ZAAQYAOPcBjEdYroKAAAAAElFTkSuQmCC'  /></div>

<div class='menu-search' onclick='openSosprofil()'><span id='search-icon'><i class='fa fa-search'></i></span><span id='close-icon'><i class='fa fa-times'></i></span></div>
<div class='mobile-menu-nav' id='mobile-menu-nav'>
<nav class='page-menu' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<ul>
<li><a href='/' itemprop='url' title='KompiAjaib.com'><span itemprop='name'>Home</span></a></li>
<li><a href='#' 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>
<div class='clear'></div>
</nav>

<div class='btn-sosial' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/Person'>
<link href='http://kompiflexible.blogspot.com/' itemprop='url'/>
<ul>
<li><a href='https://www.facebook.com/your-username' itemprop='sameAs' target='_blank' title='Facebook'><i class='fa fa-facebook fa-lg'></i></a></li>
<li><a href='https://twitter.com/your-username' itemprop='sameAs' target='_blank' title='Twitter'><i class='fa fa-twitter fa-lg'></i></a></li>
<li><a href='https://www.google.com/your-username' itemprop='sameAs' target='_blank' title='Google+'><i class='fa fa-google-plus fa-lg'></i></a></li>
<li><a href='id.linkedin.com/in/your-username' itemprop='sameAs' target='_blank' title='LinkedIn'><i class='fa fa-linkedin fa-lg'></i></a></li>
<li><a href='//www.youtube.com/c/your-username' itemprop='sameAs' target='_blank' title='Youtube'><i class='fa fa-youtube fa-lg'></i></a></li>
</ul>
<div class='clear'></div>
</div>
<div id='search-box'>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WebSite'><meta content='http://kompiflexible.blogspot.com/' itemprop='url'/><form action='/search' itemprop='potentialAction' itemscope='itemscope' itemtype='https://schema.org/SearchAction' method='get'>
<meta content='/search?q={q}' itemprop='target'/>
<input id='search-form' itemprop='query-input' name='q' placeholder='Search here and hit enter' required='required' type='text'/>
<span class='search-button'><i class='fa fa-search'></i></span>
</form></div>
<div class='clear'></div>
</div>
<div class='clear'></div>
</div>
</div>
</div>
</div>

Javascript

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

<!-- mainmenu -->
<script type='text/javascript'>
//<![CDATA[     
function openSosprofil(){var e=document.getElementById("search-box");"block"!==e.style.display?e.style.display="block":e.style.display="none";var e=document.getElementById("close-icon");"block"!==e.style.display?e.style.display="block":e.style.display="none";var e=document.getElementById("search-icon");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
function openMobilemenu(){var e=document.getElementById("mobile-menu-nav");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
//]]>
</script>