Pada kesempatan kali ini saya ingin menyebarkan tutorial Cara Membuat Menu Navigasi Ala Template SimpleOn. Pernah kah teman melihat template simpleon? Bila teman pernah melihat nya tentu nya tau dong bagaimana bentuk Menu Navigasi di template tersebut.
Nah disini saya akan mencoba membagikan bagaimana Cara Membuat Menu Navigasi tersebut. Yang berdasarkan saya sangat sajian navigasi ini sangat simple dan yummy untuk di lihat dan niscaya nya responsive.
Mungkin eksklusif saja kita mulai tutorial kali ini adalah Cara Membuat Menu Navigasi Ala Template SimpleOn. Silahkan teman ikuti langkah - langkah sebagai berikut.
Cara Membuat Menu Navigasi Ala Template SimpleOn
Silahkan teman copy arahan CSS dibawah ini, kemudian letakan arahan tersebut di bawah arahan </style> pada template sobat. <style type='text/css'> .limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto} /* Header image and title CSS */ #header{padding:0;margin:4px auto 0;display:inline-block;position:relative;} #header h1,#header h2,#header .description{font-family: 'Open Sans', sans-serif;line-height:1.1em;padding:0;margin:0 auto;font-weight:700} #header h1,#header h2{color:#fff;text-transform:uppercase;font-size:210%;list-style:none;font-weight:700;letter-spacing:-2.5px;margin:5px auto 0} #header .description{position:absolute;top:-99999px;left:-999999px;z-index:0;height:0;width:0} #header h1 a,#header h2 a{font-weight:700;color:#fff;position:relative} #header h1 a:after,#header h2 a:after{content:"";position:absolute;display:block;background:#fff;height:3px;width:0;bottom:0;left:0;transition: all 0.4s ease-in-out;} #header h1 a:hover,#header h2 a:hover{color:#fff!important} #header h1 a:hover:after,#header h2 a:hover:after{width:100%;} #header img,#header-inner img{width:100%;max-width:240px;height:auto;margin:5px auto 0} /* Header wrapper */ #header-wrapper{ width:100%;height:60px;background:#263238;background:linear-gradient(to right,#263238,#455A64,#607D8B);-webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,.2);box-shadow:0 2px 6px 0 rgba(0,0,0,.2);margin:0 auto;position:fixed;top:0;left:0;right:0;z-index:99999999;display:block;padding:0;word-wrap: break-word;-moz-box-sizing:border-box;box-sizing:border-box;} .header-limit{margin:0 auto;width:100%;padding:0;max-width:1280px;position:relative;display:block} #left-header{float:left;width:270px;display:block;padding:0 20px;-moz-box-sizing:border-box;box-sizing:border-box;} #right-header{margin:0;padding:0;display:block;position:relative;float:right;width: calc(100% - 270px);} /* Menu Header */ #menu-wrapper{margin:0 auto;position:relative;display:block;padding:0;word-wrap: break-word;-moz-box-sizing:border-box;box-sizing:border-box;float:right;width:670px} #nav {} .navi-header {font-family: 'Open Sans', sans-serif;list-style: none;margin:0;float:right} .navi-header:before,.navi-header:after {content: " ";display: table;} .navi-header:after {clear: both;} .navi-header ul {list-style: none;margin:0 auto;width:12em} .navi-header a {display:block;padding:0} .navi-header li {position: relative;margin:0} .navi-header > li {float: left;} .navi-header > li > a,.navi-header li.iconcaps,.icon_src_btn .src_msg {font-family: 'Open Sans', sans-serif;display: block;height:60px;line-height:60px;color:#fff;font-weight:700;font-size:13.5px;padding:0 16px;position:relative;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out} .navi-header > li > a:hover{background-color:#455A64;color:#fff} .navi-header li ul{background:#fff!important;display:block;position:absolute;left:0;z-index:99999;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;box-shadow:0 0 4px rgba(0,0,0,0.1);height:0;overflow:hidden;margin:30px 0 0} .navi-header li li ul {left:100%;} .navi-header > li.hover > ul {visibility:visible;opacity:10;height:auto;margin:0} .navi-header li li.hover ul {visibility:visible;opacity:10;height:auto;margin:0} .navi-header li li a,#sosmedup ul li a.social_item {display: block;color:#333;font-size:13px;position: relative;z-index:100;border-top:1px solid #eee;line-height:1.2em;padding:13px 20px;text-transform:capitalize;overflow:hidden} .navi-header li li a:hover,#sosmedup ul li a:hover.social_item {background:#ddd!important;border-color:#ccc} .navi-header li li li a {background:#fff;z-index:20;color:#333;} .navi-header li .parent:after {content: "\f107";font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;padding-left:6px;} .navi-header li.iconcaps{color:#fff;background:#607D8B;cursor:pointer;} .iconcaps .smallbutton{display:block} .navi-header li.iconcaps i{padding-left:10px;font-size:13px} .toggleMenu {font-family: 'Open Sans', sans-serif;display:none;padding:0;width:125px;text-align:center;height:60px;line-height:60px;color: #fff !important;background:#607D8B;font-size:14px;font-weight:700;position:absolute;top:0;right:0;font-weight:700;z-index:1} .toggleMenu i{font-weight:400;cursor:pointer;margin:0 0 0 7px} /* Social Footer */ #sosmedup{display:none;width:150px;position:absolute;right:0;top:60px;z-index:99;background:#fff;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;box-shadow:0 0 4px rgba(0,0,0,0.1);} #sosmedup ul{margin:0 auto;padding:0;display:block;width:100%;list-style:none} #sosmedup ul a{color:#333} #sosmedup ul li{margin:0;padding:0} #sosmedup ul li.social_btn{display:block;margin:0 auto;padding:0} #sosmedup ul li a i{width:25px;text-align:left} #sosmedup ul li a.s_fb i{color:#3F5B9B;} #sosmedup ul li a.s_tw i{color:#1C97DE;} #sosmedup ul li a.s_gp i{color:#c24538;} #sosmedup ul li a.s_ig i{color:#8e605b;} #sosmedup ul li a.s_yt i{color:#d12b19;} #sosmedup ul li a.s_le i{color:#306eeb;} /* CSS Search Wrapper */ #hide_src_btn{display:none;width:30px;overflow:hidden;float:left} #show_src_btn{float:left;width: calc(100% - 670px);overflow:hidden;height:60px} .icon_src_btn{color:#CFD8DC;padding:0;height:60px;line-height:60px;} .icon_src_btn i{cursor:pointer;font-size:20px} .icon_src_btn .src_msg{display:inline;color:#fff} #search-wrapper{background-color:#263238;margin:0 auto;padding:0;display:none;position:absolute;top:0;bottom:0;left:35px;right:0;z-index:100;height:60px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} #searchform{color:#fff;width:100%;margin:0 auto;overflow:hidden;position:relative;display:block} .search-button{clear:both;background:#607D8B;border:none;font-family: 'Open Sans', sans-serif;display: block;height:60px;line-height:60px;width:125px;text-align:center;color:#fff;font-weight:700;font-size:15px;padding:0;position:relative;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;cursor:pointer;position:absolute;top:0;right:0;font-weight:700} .search-button i{font-weight:400;margin:0 0 0 10px} .search-button:active{border:none;outline:none;padding:0;margin:0} #search-form{background-color:#37474F;font-family:'Open Sans', sans-serif;width:100%;height:60px;line-height:60px;padding:0 125px 0 0;-moz-box-sizing:border-box;box-sizing:border-box;border:none;font-weight:700;font-size:15px;color:#eee;overflow:hidden;} #search-form:focus{border:none;outline:0;color:#eee} #searchform:focus{border:none;outline:0;} #searchform input[type=text]::-webkit-input-placeholder{color:#b9d0e0} #searchform input[type=text]::-moz-placeholder{color:#b9d0e0} #searchform input[type=text]:-ms-input-placeholder{color:#b9d0e0} #searchform input[type=text]:-moz-placeholder{color:#b9d0e0} /* Responsive */ @media screen and (max-width: 1024px) { .limited_header{display:block;width:100%;overflow:hidden;height:10px;margin: 0 auto} .icon_src_btn .src_msg{display:none}} @media screen and (max-width:768px){ #left-header,#right-header,#show_src_btn,#menu-wrapper{width:100%;max-width:100%;float:none;display:block} .limited_header{height:170px} #left-header{padding:0 0 0 10px;position:absolute;top:0;left:0;} #right-header{float:right;position:relative;} #header{z-index:10} #menu-wrapper{padding:60px 0 0} #search-wrapper{left:0;z-index:100;padding:0 0 0 40px} #hide_src_btn{position:absolute;top:3px;left:10px;z-index:999} #show_src_btn{position:absolute;top:0;right:0;z-index:1;width:30px;margin:0 140px 0 0} #show_src_btn .icon_src_btn{float:right} .navi-header {float:none} .navi-header ul {list-style: none;margin:0 auto;width:100%;} .navi-header > li {float: none;display:block} .navi-header > li a{background:#37474F;display:block;padding:13px 10px;border-top:1px solid #263238} .navi-header > li:first-child a,.navi-header li li:first-child a{border:none!important} .navi-header > li > a {height:auto;line-height:1.2em;} .navi-header > li.hover > ul,.navi-header li li.hover ul {position:relative;background:#ddd!important;} .navi-header li li a {background:#ddd;line-height:1.2em;padding:12px 20px;border-color:#ccc} .navi-header li.iconcaps{height:50px;line-height:50px;padding:0 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} #sosmedup{background:#ddd;width:100%;position:relative;right:auto;left:auto;top:auto} #sosmedup ul li a{border-color:#ccc!important}} @media screen and (max-width:736px){ .limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}} @media screen and (max-width:734px){ .limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}} @media screen and (max-width:684px){ .limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}} @media screen and (max-width:667px){ .limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}} @media screen and (max-width:600px){ #header .description{font-size:15px;font-weight:400} #hide span.srcbutton{right:30px} #search input[type=search]{font-size:55px;padding:20px 10px} .recent-posts-title h2 span,.recent-posts-title h3 span{font-size:24px}} @media screen and (max-width:480px){ .limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto} #header h1,#header h2{font-size:190%} .toggleMenu,.search-button{width:60px;} .toggleMenu span,.search-button span{display:none} #show_src_btn,#search-form{margin:0 75px 0 0} .search-button i,.toggleMenu i,.search-button{margin:0 auto;font-size:16px!important} #search{margin:25% auto 0} #search input[type=search]{font-size:32px}} @media screen and (max-width:414px){ .limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}} @media screen and (max-width:412px){ .limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}} @media screen and (max-width:385px){ .limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto} #header img,#header-inner img{margin:7px auto 0;max-width:200px;}} @media screen and (max-width:375px){ .limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto}} @media screen and (max-width:320px){ .limited_header{display:block;width:100%;overflow:hidden;height:60px;margin: 0 auto} #header h1,#header h2{font-size:185%} #header img,#header-inner img{margin:9px auto 0;padding:0;width:180px}} </style> Selanjut nya silahkan teman copy arahan HTML Dibawah ini, kemudian letakan arahan tersebut di bawah arahan <body> atau gantikan arahan HTML Menu Navigasi yang ada di template teman dengan arahan dibawah ini.
<div class='header-wrapper' id='header-wrapper'> <div class='header-limit' id='header-limit'> <div id='left-header'> <header itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPHeader'> <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'> <b:widget id='Header1' locked='false' title=' (Header)' type='Header' version='1'> <b:widget-settings> <b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPFqOk9SrGhtQJzqW2pj9ua02P7P0OUwIRAr6G5xszN0wqIplZ1pav17xqsahKfRs663Q5pVanSsFPprRDfgBtVT6R4R5_iSl1eLi7ftKfJndI2_dxbrZiUKeB9Su_dSCiFeUn1GjnFJa5/s865/20180724_232126.png</b:widget-setting> <b:widget-setting name='displayHeight'>62</b:widget-setting> <b:widget-setting name='sectionWidth'>790</b:widget-setting> <b:widget-setting name='useImage'>true</b:widget-setting> <b:widget-setting name='shrinkToFit'>false</b:widget-setting> <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting> <b:widget-setting name='displayWidth'>344</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "BEHIND"'> <!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. --> <b:if cond='data:mobile'> <div id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' itemprop='headline' style='background: transparent; border-width: 0px'><b:if cond='data:blog.pageType != "item"'> <b:include name='title'/> <b:else/> <data:blog.pageName/> </b:if></h1> </div> <b:include name='description'/> </div> <b:else/> <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' itemprop='headline' style='background: transparent; border-width: 0px'><b:if cond='data:blog.pageType != "item"'> <b:include name='title'/> <b:else/> <data:blog.pageName/> </b:if></h1> </div> <b:include name='description'/> </div> </b:if> <b:else/> <!--Show the image only--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <b:if cond='data:blog.url == data:blog.homepageUrl'> <h1 style='display:none'><data:blog.pageTitle/></h1> </b:if> <!--Show the description--> <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'> <b:include name='description'/> </b:if> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <b:if cond='data:blog.pageType == "index"'> <h1 class='title' itemprop='headline name'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><data:title/></a></h1> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <h1 class='title' itemprop='headline name'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><data:title/></a></h1> <b:else/> <b:if cond='data:blog.pageType == "item"'> <h2 class='title' itemprop='name headline'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><data:title/></a></h2> <b:else/> <h2 class='title' itemprop='name headline'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><data:title/></a></h2> </b:if> </b:if> </b:if> </div> <b:include name='description'/> </div> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> <p class='description' itemprop='description'><span><data:description/></span></p> </div> </b:includable> <b:includable id='title' itemprop='name'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl' itemprop='url'><data:title/></a> </b:if> </b:includable> </b:widget> </b:section> </header> <div class='clear'/> </div> <div class='right-header' id='right-header'> <div id='show_src_btn'><span class='icon_src_btn' href='javascript:void(0)' onclick='document.getElementById('search-wrapper').style.display='block';document.getElementById('hide_src_btn').style.display='block';document.getElementById('show_src_btn').style.display='none''><i aria-hidden='true' class='fa fa-search'/><span class='src_msg'>Search here and hit enter....</span></span></div> <div id='hide_src_btn'><span class='icon_src_btn' href='javascript:void(0)' onclick='document.getElementById('search-wrapper').style.display='none';document.getElementById('hide_src_btn').style.display='none';document.getElementById('show_src_btn').style.display='block''><i aria-hidden='true' class='fa fa-reply-all'/></span></div> <div id='search-wrapper'> <div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'> <link expr:href='data:blog.homepageUrl' itemprop='url'/> <form action='https://www.google.com/search' id='searchform' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'> <meta content='https://mamankdzgn.blogspot.com/search?q={q}' itemprop='target'/> <input name='cof' type='hidden' value='FORID:10'/> <input name='ie' type='hidden' value='ISO-8859-1'/> <input id='search-form' itemprop='query-input' name='q' placeholder='Cari artikel....' required='required' type='text'/> <input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/> <button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button> </form></div> </div> <div id='menu-wrapper'> <nav id='nav' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'> <a class='toggleMenu' href='#'><span>Menu</span><i aria-hidden='true' class='fa fa-align-justify'/></a> <!-- secondary navigation sajian start --> <ul class='nav navi-header'> <li><a class='downcaps' href='#' itemprop='url'><span itemprop='name'><i aria-hidden='true' class='fa fa-user-secret'> ME</i></span></a> <ul> <li><a href='/p/about.html' itemprop='url' title=''><span itemprop='name'>About</span></a></li> <li><a href='/p/contact.html' itemprop='url' title=''><span itemprop='name'>Contact</span></a></li> <li><a href='/p/privacy-policy.html' itemprop='url' title=''><span itemprop='name'>Privacy Policy</span></a></li> <li><a href='/p/disclaimer.html' itemprop='url' title=''><span itemprop='name'>Desclaimer</span></a></li> <li><a href='/p/tos.html' itemprop='url' title=''><span itemprop='name'>TOS</span></a></li> <li><a href='/p/sitemap.html' itemprop='url' title=''><span itemprop='name'>Sitemap</span></a></li> </ul> </li> <li><a class='downcaps' href='#' itemprop='url'><span itemprop='name'><i aria-hidden='true' class='fa fa-tags'> KATEGORI</i></span></a> <ul> <li><a href='https://mamankdzgn.blogspot.com/search/label/TIPS%20BLOGGER?max-results=10' itemprop='url' title=''><span itemprop='name'>TIPS BLOGGER</span></a></li> <li><a href='https://mamankdzgn.blogspot.com/search/label/HTML?max-results=10' itemprop='url' title=''><span itemprop='name'>HTML</span></a></li> <li><a href='https://mamankdzgn.blogspot.com/search/label/ADSENSE?max-results=10' itemprop='url' title=''><span itemprop='name'>ADSENSE</span></a></li> <li><a href='https://mamankdzgn.blogspot.com/search/label/WIDGET?max-results=10' itemprop='url' title=''><span itemprop='name'>WIDGET</span></a></li> <li><a href='https://mamankdzgn.blogspot.com/search/label/SEO?max-results=10' itemprop='url' title=''><span itemprop='name'>SEO</span></a></li> </ul> </li> <li><a href='https://mamankdzgn.blogspot.com/search/label/INTERNET%20GRATIS?max-results=10' itemprop='url' rel='nofollow' title=''><span itemprop='name'><i aria-hidden='true' class='fa fa-internet-explorer'> INTERNET GRATIS</i></span></a></li> <li><a href='https://mamankdzgn.blogspot.com/search/label/Template?max-results=10' itemprop='url' rel='nofollow' title=''><span itemprop='name'><i aria-hidden='true' class='fa fa-download'> TEMPLATE</i></span></a></li> <li class='iconcaps' id='iconcaps'> <div id='show'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById('sosmedup').style.display='block';document.getElementById('hide').style.display='block';document.getElementById('show').style.display='none''><i aria-hidden='true' class='fa fa-cogs'/> TOOLS</span></div> <div id='hide'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById('sosmedup').style.display='none';document.getElementById('hide').style.display='none';document.getElementById('show').style.display='block''><i aria-hidden='true' class='fa fa-cogs'/> TOOLS</span></div> </li> </ul></nav> <div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/Person'> <link expr:href='data:blog.homepageUrl' itemprop='url'/> <div id='sosmedup'> <ul> <li class='social_btn'><a class='social_item s_fb' href='https://mamankdzgn.blogspot.com/p/ads-converter.html' itemprop='sameAs' rel='nofollow' target='_blank' title='Ads Converter'><i aria-hidden='true' class='fa fa-circle-o'/> Ads Converter</a></li> <li class='social_btn'><a class='social_item s_gp' href='https://mamankdzgn.blogspot.com/p/material-design-color-palette.html' itemprop='sameAs' rel='nofollow' target='_blank' title='Color Palette'><i aria-hidden='true' class='fa fa-circle-o'/> Color Palette</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class='limited_header'/> Langkah selanjut nya silahkan teman copy arahan dibawah ini, kemudian letakan arahan tersebut di atas arahan </body>
<script type='text/javascript'> //<![CDATA[ var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".toggleMenu").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){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").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){$(".toggleMenu").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> Lalu Save template teman dan cek lihat terlebih dahulu hasil nya.
Bila hasil nya acak-acakan yang harus teman lakukan yaitu, menghapus arahan style CSS Menu Navigasi, Header dan CSS search yang sebelum nya ada di template sobat, biar tidak terjadi bentrok dengan CSS Menu Navigasi yang gres ini.
Kemungkinan Menu Navigasi Ala Template SimpleOn ini dapat di terapkan di semua template, mungkin agak sedikit di atur lagi ukuran nya biar dapat sesuai dengan template masing - masing.
Bila teman memakai template bikinan arlinadzgn mungkin akan gampang untuk di terapkan, alasannya saya sendiri pun memakai kerangka dari template nya arlinadzgn untuk memasang Menu Navigasi ini.
Untuk referensi nya teman dapat lihat pada Menu Navigasi yang ada di blog ini (kalau belum berubah). Tampilan nya pun sama persis menyerupai gambar di atas. Bila sajian navigasi ini sudah sukses di terapkan di template sobat, silahkan teman tinggal edit lagi dari bab sajian navigasi tersebut yang ada nama domain blog ini.
Note : Wajib backup terlebih dahulu template teman sebelum melaksanakan tutorial ini.
Mungkin itu saja yang dapat saya bagikan pada kesempatan kali ini. semoga artikel ini dapat bermanfaat buat teman yang sedang mencari Cara Membuat Menu Navigasi Ala Template SimpleOn. Selamat mencoba!
