Cara Membuat Menu Navigasi dan Kotak Pencarian Responsive

iyan-blog.com | Cara Membuat Menu Navigasi dan Kotak Pencarian Responsive - Dalam sebuah blog pastinya kita akan menemui menu navigasi, dan kali ini saya akan membagikan tutorial caranya membuat menu navigasi dan kotak pencarian yang responsive, langsung saja berikut tutorialnya:

1. Masuk ke Blogger
2. Masuk ke Halaman Template >> Edit HTML
3. cari kode ]]></b:skin> atau </style>

4. letakkan kode dibawah ini diatas ]]></b:skin> atau </style>

/* Napigate tamfan */
#napigate{background:#1658A0}
#napigate ul li a{color:#fff}
#napigate ul li ul li a:hover{background:#34495e}
#napigate ul li:hover a{background:#2c3e50}
#napigate{overflow:hidden;clear:both}
#napigate ul{list-style:none;padding:0;margin:0}
#napigate ul li{display:block;float:left;margin:0}
#napigate ul li a{display:block;text-shadow:1px 1px 2px #666;font-family:'Oswald',sans-serif;font-size:16px;padding:10px 15px;transition:all 0s ease-in-out;text-transform:uppercase;}
#napigate ul li ul li{float:none;border-top:1px solid rgba(0,0,0,0.11)}
#napigate ul li ul li a{font-size:14px;text-shadow:0 0 0 #fff}
#napigate ul li ul{visibility:hidden;position:absolute;z-index:9999}
#napigate ul li:hover ul{visibility:visible;background:#34495e}
#pencari{margin-left:5px;background:#fff;margin-bottom:5px;text-align:center}
#search{padding:5px}
#penginput{padding:5px;border:0;background:#2c3e50;color:#fff}
#nyarinya input[type="text"]{border:0;padding:10px;background:#fff;font-weight:bold;color:#666;font-size:13px;margin:0}
#search-top{padding:5px;overflow:hidden;text-align:right;margin:0}
#search-button-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;transition:all 0.7s ease 0s;height:36px;width:40px;background-color:#34495e;background-position:13px -243px;border:none;float:right;cursor:pointer}
#nyarinya{float:right;padding-right:5px}
#hidding2{display:none}
#hidding2{background:#1658A0;color:#fff;padding:10px;font-size:16px;font-family:'Oswald',sans-seriff;cursor:pointer}

5. masukan css dibawah ini diatas ]]></b:skin> atau </style> agar menu navigasinya responsive

@media only screen and (max-width:992px){
#napigate ul li{float:none}#napigate ul li ul{position:inherit;visibility:visible;background:#34495e}#napigate ul li ul li a{padding:10px 0 10px 45px}#napigate ul li:hover a{background:inherit}#napigate ul{display:none;float:none;clear:both}#hidding1,#hidding2{display:block;clear:both}#hidding2{float:left}.displaying{display:inherit!important}
}  

6.

• masukkan Jquery dibawah ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

• lalu, masukkan script dibawah ini diatas kode </head>

<script>
$(document).ready(function(){
  $("#hidding1").click(function(){
    $("#croscoll ul").toggleClass("displaying");
  });
  $("#hidding2").click(function(){
    $("#napigate ul").toggleClass("displaying");
  });
});
</script>

7. kemudian, masukan HTMLnya dibawah kode </header>

<nav id='napigate'>
<label id='hidding2'>&#8801; Menu</label>
<ul>
<li><a href='#'>ABC</a><ul>
<li><a href='#'>Download Apk Android</a></li>
<li><a href='#'>Trik Android</a></li>
</ul>
</li>
<li><a href='#'>ABC</a><ul>
<li><a href='#'>Jasa Adsense Non Hosted</a></li>
<li><a href='#'>Jasa Adsense Hosted</a></li>
<li><a href='#'>Jasa Adsense Upgrade</a></li>
<li><a href='#'>Trik Adsense</a></li>
</ul>
</li>
<li><a href='#'>ABC</a><ul>
<li><a href='#'>Jasa Template Responsive</a></li>
<li><a href='#'>Tutorial Blog</a></li>
<li><a href='#'>Template Blog</a></li>
</ul>
</li>
<li><a href='#'>ABC</a><ul>
<li><a href='#'>Download Game PC</a></li>
<li><a href='#'>Download Game HP</a></li>
</ul>
</li>
<li><a href='#'>ABC</a><ul>
<li><a href='#'>Harga Handphone</a></li>
<li><a href='#'>Harga Laptop</a></li>
<li><a href='#'>Harga Netbook</a></li>
</ul>
</li>
<li><a href='#'>Kuliner</a></li>
<li><a href='#'>Travel</a></li>
</ul>
<div id='nyarinya'>
<form action='/search' id='search-top' method='get'>
<input id='diklik' name='q' placeholder='Search...' type='text'/><input id='search-button-top' type='submit' value=''/></form>
</div>
</nav> 

8. Simpan Template

Selesai, Semoga bermanfaat.