Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger

Baca Juga

Tutorial Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger ini bagi bloger yang mau ganti menu navigasi di bawah header.

Navigasi Menu Responsive ini CB sebut Terbaik karena tanpa Javascript, murni CSS, sehingga tidak memberatkan tampilan blog, ringan, alias fast loading.

Selain itu, sudah Dropdown Menu, dan ketika tampil di mobile (HP), tampilannya bagus, ada teks Show Menu, selain ada icon menu yang biasa tampil di mobile.

Ini penampakkannya di mobile.

Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger

Ini dia Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger.

1. Klik Tema > Edit HTML
2. Copas kode CSS Navigasi Menu Responsive berikut ini di atas kode ]]></b:skin>

#nav{background:#384850;margin:0;text-transform:uppercase;font-weight:600;font-family:Arial;font-size:14px}
#nav ul{margin:0;padding:0}
#nav li{list-style:none;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;margin:0;padding:0}
#nav li a{display:block;text-decoration:none;color:#fff;padding:1em}
#nav li a:hover{color:#fff;background:#191919}
.show-menu{text-decoration:none;color:#fff;text-align:left;padding:8px 20px;display:none}
.show-menu b{font-size:20px}
.show-menu span{margin-right:1em;float:right}
#nav input[type=checkbox]{display:none}
#nav input[type=checkbox]:checked ~ #menus{display:block}
#nav ul.sub-menus{height:auto;overflow:hidden;width:180px;background:#eee;position:absolute;z-index:99;display:none}
#nav ul.sub-menus li{display:block;width:100%;text-transform:none;text-shadow:none}
#nav ul.sub-menus a{color:#fff;background:#48d}
#nav ul.sub-menus a:hover{background:#ddd;color:#333}
#nav li:hover ul.sub-menus{display:block}
#nav a.prett{padding:13px}
#nav a.prett::after{content:&quot;width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ccc transparent transparent;position:absolute;top:18px;right:9px}
@media screen and (max-width:800px) {
#nav{margin-bottom:30px}
#nav ul{position:static;display:none}
#nav li{border-bottom:1px solid #535b69}
#nav ul li,#nav li a{width:100%}
#nav li a{display:block;height:auto;line-height:normal;text-align:left}
#nav ul.sub-menus{width:100%;position:static;padding-left:20px}
.show-menu{display:block!important;line-height:25px}
.show-menu:hover{cursor:pointer}
label{margin:0!important}
}

3. Copas kode HTML Menu Responsive berikut ini di bawah kode </header> atau kode penutup Header Blog.

<nav id='nav'>
<label class='show-menu' for='show-menu'><b>&#9776;</b> <span>Show Menu</span></label>
<input autocomplete='off' id='show-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a href='/'>Home</a></li>
    <li><a href='/p/about.html'>About</a></li>
    <li><a href='/p/kontak.html'>Kontak</a></li>
    <li><a href='/p/sitemap.html'>Sitemap</a></li>
    <li><a href='/p/sitemap.html'>Disclaimer</a></li>
<li><a class='prett' href='#'>Categories <span class='arrow'>&#9660;</span></a>
 <ul class='sub-menus'>
 <li><a href='#'>Sub Menu1</a></li>
 <li><a href='#'>Sub Menu2</a></li>
 <li><a href='#'>Sub Menu3</a></li>
 <li><a href='#'>Sub Menu4</a></li>
 <li><a href='#'>Sub Menu5</a></li>
</ul></li>
      <li><a href='#'>Blogging</a></li>
      <li><a href='#'>Links</a></li>
</ul>
</nav>

4. Save!

Demikian Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger.

Menu Plus Kotak Pencarian

Jika menu di atas akan ditambah Kotak Pencarian, berikut ini kode kotak pencariannya.

Kode CSS:

#search_box{width:200px;position:relative;height:40px;float:right;top:5px;}
.fa-search:before {content: "\f002";color: #fff;}
#search_box #search{float:right;top:0;right:50px;position:absolute;border:1px solid #d9e0e2;border-right:0;display:none}
#search_box #search #search_text{color:#888;width:200px;padding:10px;font-size:14px;border:0 none;height:40px;margin-right:0;outline:none;background:#fff;float:left;box-sizing:border-box;transition:all .15s;font-weight:normal}
#search_box #search #search_text:focus{background:#efefef}
#search_box .search_button{float:right;color:#222;height:42px;width:50px;text-align:center;line-height:45px;display:inline-block;cursor:pointer;font-size: 20px;}
#search_box .search_button.active,#search_box .search_button:hover{background:#00aa9f;color:#fff}
@media screen and (max-width:600px) {
.fa-search:before {content: "\f002";color: #222;}
#search_box{width:100%;float:right;top:0;background:#eee}
}

Kode HTML

<div id='search_box'><form action='/search' id='search' method='get'>
<input class='search_text' id='search_text' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Press Enter to Submit&apos;;}' onfocus='if (this.value == &apos;Search...&apos;) {this.value = &apos;&apos;;}' type='text' value='Search...'/></form><div class='search_button'><i class='fa fa-search'/></div></div>

Simpan sebelum kode </ul></nav> di menu Anda.

Kode JS
Simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
!function(){$(".search_button").on("click",function(t){t.preventDefault(),$("#search").animate({width:"toggle"}).focus(),$(".search_button").toggleClass("active")})}()
//]]>
    </script>

Save!

Demikian Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger plus Kotak Pencarian. Good Luck & Happy Blogging! (www.contohblog.com).

See the Pen
Best Responsive Menu for Blogger by CB Blogger (@cbblogger)
on CodePen.