Membuat Hidangan Navigation Kafe Responsive
Cara Membuat Menu Navigation Bar Responsive Di Blog Cara Membuat Menu Bar Responsive Di Blog Kali ini aku akan membuatkan Tutorial Cara...
https://tutorialcarapintar.blogspot.com/2019/02/membuat-hidangan-navigation-kafe.html
Cara Membuat Menu Navigation Bar Responsive Di Blog
Menu Bar ini cocok buat kalian yang ingin mendesain templatenya menjadi suport mobile friendly yang akan memudahkan pengunjung untuk mengontrol isi dari sajian yang ditampilkan..
Sebelumnya aku juga sudah pernah sahre wacana beberapa sajian kafe yang simple dan responsive... bagi kalian yang ingin melihatnya dapat kunjungi artikel berikut ini...
Tutorial Blogger Lainnya :
Untuk Melihat yang lainnya dapat kunjungi link berikut.. Search Post Menu Navigation
Nah kini kita lanjut ke tutorial cara menciptakan menubar di blognya...
Cara Membuat Menu Bar Responsive Di Blog
- 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?&max-results=6" itemprop="url"><span itemprop="name">CSS</span></a></li> <li class=""><a href="https://tutorialcarapintar.blogspot.com//search/label/HTML?&max-results=6" itemprop="url"><span itemprop="name">HTML</span></a></li> <li><a href="https://tutorialcarapintar.blogspot.com//search/label/Seo?&max-results=6" itemprop="url"><span itemprop="name">SEO</span></a></li> <li><a href="https://tutorialcarapintar.blogspot.com//search/label/Templates?&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> - 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?&max-results=6" itemprop="url"><span itemprop="name">CSS</span></a></li> <li class=""><a href="https://tutorialcarapintar.blogspot.com//search/label/HTML?&max-results=6" itemprop="url"><span itemprop="name">HTML</span></a></li> <li><a href="https://tutorialcarapintar.blogspot.com//search/label/Seo?&max-results=6" itemprop="url"><span itemprop="name">SEO</span></a></li> <li><a href="https://tutorialcarapintar.blogspot.com//search/label/Templates?&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> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> <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............
Apabila ada yang mau ditanyakan, silahkan bertanya di kolom komentar..
