Membuat Hidangan Navigation Kafe Responsive

• Login ke Blogger.com

• Masuk ke Tab Template-> Klik Edit HTML, Cari Code </head> 

• Lalu masukan CSS dibawah ini sempurna diatas aba-aba had tadi

 <style type='text/css'> /* CSS HTML5 */ menu,nav{display:block;}*{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}input,button,select,textarea{font-size:100%;line-height:normal;vertical-align:baseline;} /* CSS Main Menu */ a.menu-slide{display:none;background:#374760;padding:0 15px;height:46px;line-height:46px;color:#fff;text-transform:uppercase} a.menu-slide:hover {color:#fff;} #nav {font-size:14px;font-weight:700;background:#374760;height:56px;line-height:56px;margin:0 auto;} .kang-teja {background:#374760;list-style:none;margin:0;float:left;} .kang-teja:before,.kang-teja:after {content: " ";display:table;} .kang-teja:after {clear:both;} .kang-teja ul {list-style:none;margin:0;width:11em;} .kang-teja a {display:block;padding:0 15px;} .kang-teja li {position:relative;margin:0;} .kang-teja > li {float:left;} .kang-teja > li > a {display:block;height:56px;line-height:56px;color:#fff;overflow:hidden;transition:initial} .kang-teja > li > a.active {background:#3cc091;color:#fff;} .kang-teja > li:hover > a {background:#3cc091;color:#fff;} .kang-teja > li:hover > a.active {background:#37b185;} .kang-teja li ul {background:#fafafa;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all .3s} .kang-teja li li ul {left:100%;top:-1px;} .kang-teja > li.hover > ul {visibility:visible;opacity:1;top:100%;} .kang-teja li li.hover ul {visibility:visible;opacity:10;} .kang-teja li li a {display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial} .kang-teja li li a:hover {background:#3cc091;color:#fff;} .kang-teja li li li a {background:#fff;z-index:20;color:#333;} .kang-teja li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;} .kang-teja li:hover .parent:after{color:#fff;} .kang-teja li ul li .parent:after {content: "\f0da";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#768187;float:right;} .kang-teja li ul li .parent:hover:after {color:#fff;} #search-form {background:#374760;float:right;margin:0;width:210px;} #search-form table {width:100%;margin:0;} #search-form input#search-box[type="text"] {background:#fff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;border:none;} #search-form input#search-button[type="submit"] {font-family:FontAwesome;background:#3cc091;color:#fff;height:36px;line-height:36px;margin:5px 10px 5px -2px;padding:0 15px;border:none;outline:none;transition:all 0.25s;} #search-form input#search-button[type="submit"]:hover{background:#37b185;cursor:pointer;} #search-form input#search-box[type="text"]:focus {background:#fdfdfd;outline:none;} /* CSS Menu Responsive */ @media screen and (max-width:960px){   #search-form{width:100%;background:#263142;padding:5px 0;}   #search-form td.search-box{padding-right:0;width:100%;}   #search-form input#search-box[type="text"]{background:#fff;}   #search-form input#search-box[type="text"]:focus{background:#fefefe;outline:none;} ;} @media only screen and (max-width:768px){   .nav li ul:before{display:none;height:auto;overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.1);}   #nav{background:#374760}   .nav{float:none;width:100%;max-width:100%;}   .active{display:block;}   .kang-teja > li > a.active{background:#263142;}   .kang-teja > li > a.active:hover{background:#263142;}   #search-form{margin:0;}   .nav > li{float:none;overflow:hidden;}   .nav ul{display:block;width:100%;float:none;}   .kang-teja li ul{background:#f6f6f6;box-shadow:none;}   .kang-teja li ul li a{background:#f0f0f0;}   .kang-teja > li > a{background:#263142;height:40px;line-height:40px;}   .kang-teja li li a:hover{background:#263142;color:#fff;}   .nav > li.hover > ul,.nav li li.hover ul{position:static;}   .kang-teja li .parent:after,.kang-teja li ul li .parent:after{content:"\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;float:right;color:#949ea0;}   .kang-teja li:active .parent:after,.kang-teja li ul li:active .parent:after{color:#c5cbd0;}   #search-form td.search-box{padding:0 0 0 10px;}   #search-form td.search-button{width:1%;}   #search-form input#search-box[type="text"]{margin:0;background:#fff;}   #search-form input#search-box[type="text"]:focus{background:#fdfdfd;outline:none;} ;} @media only screen and (max-width:640px){   #nav{background:#374760;margin:0;height:46px;line-height:46px;} ;} </style> 

• Langkah selanjutnya, cari aba-aba </body> Dan Masukan Javascript dibawah ini sempurna di atasnya..

 <script type='text/javascript'> //<![CDATA[ // Main Menu var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-slide").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".menu-slide").css("display","inline-block");if(!$(".menu-slide").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".menu-slide").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}} //]]> </script> 

• Selanjutnya cari Kode 'outer-wrapper kemudian masukan html dibawah ini sempurna dibawah aba-aba tadi, teladan aba-aba <div class='outer-wrapper'> Setiap Template Kodenya Bisa Berbeda-beda..

 <nav id="nav" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">   <a style="display: none;" class="menu-slide" href="#"><i class="fa fa-list"></i> Menu</a>   <ul class="nav kang-teja">     <li class=""><a class="active" href="/"><span itemprop="name"><i class="fa fa-home"></i> Home</span></a></li>     <li class=""><a class="parent" href="#" itemprop="url"><span itemprop="name">Web Tools</span></a>       <ul>         <li class=""><a href="#" itemprop="url"><span itemprop="name">Ad Converter</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">Color Picker</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Filter</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Minifier</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Triangle</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">Fontawesome</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">Kamus HTML</span></a></li>       </ul>     </li>     <li class=""><a href="https://tutorialcarapintar.blogspot.com//search/label/CSS?&amp;max-results=6" itemprop="url"><span itemprop="name">CSS</span></a></li>     <li class=""><a href="https://tutorialcarapintar.blogspot.com//search/label/HTML?&amp;max-results=6" itemprop="url"><span itemprop="name">HTML</span></a></li>     <li><a href="https://tutorialcarapintar.blogspot.com//search/label/Seo?&amp;max-results=6" itemprop="url"><span itemprop="name">SEO</span></a></li>     <li><a href="https://tutorialcarapintar.blogspot.com//search/label/Templates?&amp;max-results=6" itemprop="url"><span itemprop="name">Template</span></a></li>     <li><a href="#" itemprop="url"><span itemprop="name">Tips Blogger</span></a></li>     <li><a href="#" itemprop="url"><span itemprop="name">Widget</span></a></li>   </ul>   <form action="https://tutorialcarapintar.blogspot.com//p/search-post-mas-tamvan.html" id="search-form">     <input name="cx" value="partner-pub-016346400151212832090:egwuycyircu" type="hidden"/>     <input name="cof" value="FORID:10" type="hidden"/>     <input name="ie" value="ISO-8859-1" type="hidden"/>     <table>       <tbody>         <tr>           <td class="search-box">             <input id="search-box" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search..." type="text"/>           </td>           <td class="search-button">             <input id="search-button" value="" type="submit"/>           </td>         </tr>       </tbody>     </table>   </form> </nav> 

Silahkan ganti tanda # [pagar] dengan link tujuan kalian. Dan ganti juga Nama Menu Sesuai Keinginan kalian

• Sekarang Save Template, Dan Lihat Hasilnya....

Kalo cara di atas menciptakan kalian ribet, kalian dapat coba cara simple dibawah ini...

Cara Simple Memasang Menu Navigation Bar Responsive

• Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript. Contoh Lihat Gambar...

• Setelah diklik / dibuka HTML/Javascriptnya, Masukan ScriptMenu Navigation Bar Responsive dibawah ini kedalam kolom HTML/Javascript.

  <nav id="nav" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">   <a style="display: none;" class="menu-slide" href="#"><i class="fa fa-list"></i> Menu</a>   <ul class="nav kang-teja">     <li class=""><a class="active" href="/"><span itemprop="name"><i class="fa fa-home"></i> Home</span></a></li>     <li class=""><a class="parent" href="#" itemprop="url"><span itemprop="name">Web Tools</span></a>       <ul>         <li class=""><a href="#" itemprop="url"><span itemprop="name">Ad Converter</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">Color Picker</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Filter</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Minifier</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">CSS Triangle</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">Fontawesome</span></a></li>         <li class=""><a href="#" itemprop="url"><span itemprop="name">Kamus HTML</span></a></li>       </ul>     </li>     <li class=""><a href="https://tutorialcarapintar.blogspot.com//search/label/CSS?&amp;max-results=6" itemprop="url"><span itemprop="name">CSS</span></a></li>     <li class=""><a href="https://tutorialcarapintar.blogspot.com//search/label/HTML?&amp;max-results=6" itemprop="url"><span itemprop="name">HTML</span></a></li>     <li><a href="https://tutorialcarapintar.blogspot.com//search/label/Seo?&amp;max-results=6" itemprop="url"><span itemprop="name">SEO</span></a></li>     <li><a href="https://tutorialcarapintar.blogspot.com//search/label/Templates?&amp;max-results=6" itemprop="url"><span itemprop="name">Template</span></a></li>     <li><a href="#" itemprop="url"><span itemprop="name">Tips Blogger</span></a></li>     <li><a href="#" itemprop="url"><span itemprop="name">Widget</span></a></li>   </ul>   <form action="https://tutorialcarapintar.blogspot.com//p/search-post-mas-tamvan.html" id="search-form">     <input name="cx" value="partner-pub-016346400151212832090:egwuycyircu" type="hidden"/>     <input name="cof" value="FORID:10" type="hidden"/>     <input name="ie" value="ISO-8859-1" type="hidden"/>     <table>       <tbody>         <tr>           <td class="search-box">             <input id="search-box" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search..." type="text"/>           </td>           <td class="search-button">             <input id="search-button" value="" type="submit"/>           </td>         </tr>       </tbody>     </table>   </form> </nav>  <style type='text/css'> /* CSS HTML5 */ menu,nav{display:block;}*{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}input,button,select,textarea{font-size:100%;line-height:normal;vertical-align:baseline;} /* CSS Main Menu */ a.menu-slide{display:none;background:#374760;padding:0 15px;height:46px;line-height:46px;color:#fff;text-transform:uppercase} a.menu-slide:hover {color:#fff;} #nav {font-size:14px;font-weight:700;background:#374760;height:56px;line-height:56px;margin:0 auto;} .kang-teja {background:#374760;list-style:none;margin:0;float:left;} .kang-teja:before,.kang-teja:after {content: " ";display:table;} .kang-teja:after {clear:both;} .kang-teja ul {list-style:none;margin:0;width:11em;} .kang-teja a {display:block;padding:0 15px;} .kang-teja li {position:relative;margin:0;} .kang-teja > li {float:left;} .kang-teja > li > a {display:block;height:56px;line-height:56px;color:#fff;overflow:hidden;transition:initial} .kang-teja > li > a.active {background:#3cc091;color:#fff;} .kang-teja > li:hover > a {background:#3cc091;color:#fff;} .kang-teja > li:hover > a.active {background:#37b185;} .kang-teja li ul {background:#fafafa;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all .3s} .kang-teja li li ul {left:100%;top:-1px;} .kang-teja > li.hover > ul {visibility:visible;opacity:1;top:100%;} .kang-teja li li.hover ul {visibility:visible;opacity:10;} .kang-teja li li a {display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial} .kang-teja li li a:hover {background:#3cc091;color:#fff;} .kang-teja li li li a {background:#fff;z-index:20;color:#333;} .kang-teja li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;} .kang-teja li:hover .parent:after{color:#fff;} .kang-teja li ul li .parent:after {content: "\f0da";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#768187;float:right;} .kang-teja li ul li .parent:hover:after {color:#fff;} #search-form {background:#374760;float:right;margin:0;width:210px;} #search-form table {width:100%;margin:0;} #search-form input#search-box[type="text"] {background:#fff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;border:none;} #search-form input#search-button[type="submit"] {font-family:FontAwesome;background:#3cc091;color:#fff;height:36px;line-height:36px;margin:5px 10px 5px -2px;padding:0 15px;border:none;outline:none;transition:all 0.25s;} #search-form input#search-button[type="submit"]:hover{background:#37b185;cursor:pointer;} #search-form input#search-box[type="text"]:focus {background:#fdfdfd;outline:none;} /* CSS Menu Responsive */ @media screen and (max-width:960px){   #search-form{width:100%;background:#263142;padding:5px 0;}   #search-form td.search-box{padding-right:0;width:100%;}   #search-form input#search-box[type="text"]{background:#fff;}   #search-form input#search-box[type="text"]:focus{background:#fefefe;outline:none;} ;} @media only screen and (max-width:768px){   .nav li ul:before{display:none;height:auto;overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.1);}   #nav{background:#374760}   .nav{float:none;width:100%;max-width:100%;}   .active{display:block;}   .kang-teja > li > a.active{background:#263142;}   .kang-teja > li > a.active:hover{background:#263142;}   #search-form{margin:0;}   .nav > li{float:none;overflow:hidden;}   .nav ul{display:block;width:100%;float:none;}   .kang-teja li ul{background:#f6f6f6;box-shadow:none;}   .kang-teja li ul li a{background:#f0f0f0;}   .kang-teja > li > a{background:#263142;height:40px;line-height:40px;}   .kang-teja li li a:hover{background:#263142;color:#fff;}   .nav > li.hover > ul,.nav li li.hover ul{position:static;}   .kang-teja li .parent:after,.kang-teja li ul li .parent:after{content:"\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;float:right;color:#949ea0;}   .kang-teja li:active .parent:after,.kang-teja li ul li:active .parent:after{color:#c5cbd0;}   #search-form td.search-box{padding:0 0 0 10px;}   #search-form td.search-button{width:1%;}   #search-form input#search-box[type="text"]{margin:0;background:#fff;}   #search-form input#search-box[type="text"]:focus{background:#fdfdfd;outline:none;} ;} @media only screen and (max-width:640px){   #nav{background:#374760;margin:0;height:46px;line-height:46px;} ;} </style>  <script type='text/javascript'> //<![CDATA[ // Main Menu var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-slide").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".menu-slide").css("display","inline-block");if(!$(".menu-slide").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".menu-slide").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}} //]]> </script>  

Buat kalian yang sajian drop downnya tidak muncul, silahkan tambahkan script berikut di atas </head>
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> 
Atau Icon Font Awesomenya tidak tampil.. silahkan masukan script ini di atas aba-aba </head> juga.
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> 

Kalo sudah tinggal ganti tanda pagar dengan link kalian dan judul menunya juga ganti.

• Save widget n done............

Cukup sekian dan erimakasih, semoga artikel wacana Cara Memasang Menu Navigation Bar Responsive di blog ini bermanfaat..
Apabila ada yang mau ditanyakan, silahkan bertanya di kolom komentar..