Pada kesempatan kali ini saya ingin mengembangkan tutorial Cara Membuat Menu Navigasi Ala Template SimpleOn. Pernah kah sahabat melihat template simpleon? Bila sahabat 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 hidangan navigasi ini sangat simple dan yummy untuk di lihat dan niscaya nya responsive.
Mungkin pribadi saja kita mulai tutorial kali ini adalah Cara Membuat Menu Navigasi Ala Template SimpleOn. Silahkan sahabat ikuti langkah - langkah sebagai berikut.
Cara Membuat Menu Navigasi Ala Template SimpleOn
Silahkan sahabat copy aba-aba CSS dibawah ini, kemudian letakan aba-aba tersebut di bawah aba-aba </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 sahabat copy aba-aba HTML Dibawah ini, kemudian letakan aba-aba tersebut di bawah aba-aba <body> atau gantikan aba-aba HTML Menu Navigasi yang ada di template sahabat dengan aba-aba 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='COP4S BERITA (Header)' type='Header' version='1'> <b:widget-settings> <b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG5c7eFkl27EhEK9AXKNw9uq7xhHLMhj_3SO1JxVs9BrhhAvZ6pU35OsTdT_6LmCKh6vR2D8VioCxZ-cyVUkcm9Z73eED9igJ36LVDdjV_xRUZwtUnopui5j3PNzjnReev3RreQjH5El03/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://cop4sberita.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 hidangan 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://cop4sberita.blogspot.com/search/label/TIPS%20BLOGGER?max-results=10' itemprop='url' title=''><span itemprop='name'>TIPS BLOGGER</span></a></li> <li><a href='https://cop4sberita.blogspot.com/search/label/HTML?max-results=10' itemprop='url' title=''><span itemprop='name'>HTML</span></a></li> <li><a href='https://cop4sberita.blogspot.com/search/label/ADSENSE?max-results=10' itemprop='url' title=''><span itemprop='name'>ADSENSE</span></a></li> <li><a href='https://cop4sberita.blogspot.com/search/label/WIDGET?max-results=10' itemprop='url' title=''><span itemprop='name'>WIDGET</span></a></li> <li><a href='https://cop4sberita.blogspot.com/search/label/SEO?max-results=10' itemprop='url' title=''><span itemprop='name'>SEO</span></a></li> </ul> </li> <li><a href='https://cop4sberita.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://cop4sberita.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://cop4sberita.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://cop4sberita.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 sahabat copy aba-aba dibawah ini, kemudian letakan aba-aba tersebut di atas aba-aba </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 sahabat dan cek lihat terlebih dahulu hasil nya.
Bila hasil nya awut-awutan yang harus sahabat lakukan yaitu, menghapus aba-aba style CSS Menu Navigasi, Header dan CSS search yang sebelum nya ada di template sobat, semoga 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 semoga dapat sesuai dengan template masing - masing.
Bila sahabat memakai template bikinan arlinadzgn mungkin akan gampang untuk di terapkan, sebab saya sendiri pun memakai kerangka dari template nya arlinadzgn untuk memasang Menu Navigasi ini.
Untuk rujukan nya sahabat dapat lihat pada Menu Navigasi yang ada di blog ini (kalau belum berubah). Tampilan nya pun sama persis menyerupai gambar di atas. Bila hidangan navigasi ini sudah sukses di terapkan di template sobat, silahkan sahabat tinggal edit lagi dari cuilan hidangan navigasi tersebut yang ada nama domain blog ini.
Note : Wajib backup terlebih dahulu template sahabat sebelum melaksanakan tutorial ini.
Mungkin itu saja yang dapat saya bagikan pada kesempatan kali ini. semoga artikel ini dapat bermanfaat buat sahabat yang sedang mencari Cara Membuat Menu Navigasi Ala Template SimpleOn. Selamat mencoba!
Share this Article