Seperti yang Anda ketahui, menu navigasi adalah salah satu point untuk mempercantik / bagus tampilan blog Anda, maka dari itu saya akan membagikan tutorial membuat menu navigasi yang di pakai oleh Arlina Design.
Seperti yang Anda ketahui, blog Arlina Design adalah blog yang membagikan template dan tutorial blog. Dengan itu blog tersebut sudah pasti bagus dan elegan. Sebelumnya saya juga sudah membagikan tutorial widget-widget atau disain yang di pakai oleh Arlina Design. Bila Anda ingin memakai widget-widget tersebut.
Membuat Navigation Menu Ala Arlina Design
Langkah pertama :
Login ke Blogger > Tema > Edit HTML. Lalu Anda taruh kode CSS dibawah ini di atas kode
]]></b:skin> atau </style>/* 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;}
.arlina-mainmenu {background:#374760;list-style:none;margin:0;float:left;}
.arlina-mainmenu:before,.arlina-mainmenu:after {content: " ";display:table;}
.arlina-mainmenu:after {clear:both;}
.arlina-mainmenu ul {list-style:none;margin:0;width:11em;}
.arlina-mainmenu a {display:block;padding:0 15px;}
.arlina-mainmenu li {position:relative;margin:0;}
.arlina-mainmenu > li {float:left;}
.arlina-mainmenu > li > a {display:block;height:56px;line-height:56px;color:#fff;overflow:hidden;transition:initial}
.arlina-mainmenu > li > a.active {background:#3cc091;color:#fff;}
.arlina-mainmenu > li:hover > a {background:#3cc091;color:#fff;}
.arlina-mainmenu > li:hover > a.active {background:#37b185;}
.arlina-mainmenu li ul {background:#fafafa;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all .3s}
.arlina-mainmenu li li ul {left:100%;top:-1px;}
.arlina-mainmenu > li.hover > ul {visibility:visible;opacity:1;top:100%;}
.arlina-mainmenu li li.hover ul {visibility:visible;opacity:10;}
.arlina-mainmenu li li a {display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial}
.arlina-mainmenu li li a:hover {background:#3cc091;color:#fff;}
.arlina-mainmenu li li li a {background:#fff;z-index:20;color:#151515;}
.arlina-mainmenu li .parent:after {content: "\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;}
.arlina-mainmenu li:hover .parent:after{color:#fff;}
.arlina-mainmenu 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;}
.arlina-mainmenu 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;}
@media only screen and (max-width:640px){
.responsive-menu,#nav{background:#374760;margin:0;height:46px;line-height:46px;}
}
@media only screen and (max-width:768px){
#nav {background:#f5f5f5;}
.nav {float:none;width:100%;max-width:100%}
.active {display:block;}
.arlina-mainmenu > li > a.active {background:#263142;}
.arlina-mainmenu > li > a.active:hover {background:#263142;}
#search-form {margin:0;}
.nav > li {float:none;overflow:hidden;}
.nav ul {display:block;width:100%;float:none;}
.arlina-mainmenu li ul {background:#f6f6f6;box-shadow:none;}
.arlina-mainmenu li ul li a{background:#f0f0f0;}
.arlina-mainmenu > li > a{background:#263142;height:40px;line-height:40px}
.arlina-mainmenu li li a:hover {background:#263142;color:#fff;}
.nav > li.hover > ul , .nav li li.hover ul {position:static;}
.arlina-mainmenu li .parent:after,.arlina-mainmenu 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;}
.arlina-mainmenu li:active .parent:after,.arlina-mainmenu 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;}
}Jika di template Anda sudah mempunyai css responsive, silakan Anda pastekan css diatas sesuai disain responsive diatas
Langkah kedua :
Silakan ganti kode HTML navigasi menu Anda, dan ganti dengan dibawah ini
<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<a class='menu-slide' href='#'><i class='fa fa-list'></i> Menu</a>
<ul class='nav arlina-mainmenu'>
<li><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'></i> Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Web Tools</span></a>
<ul>
<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Ad Converter</span></a></li>
<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Color Picker</span></a></li>
<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>CSS Filter</span></a></li>
<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>CSS Minifier</span></a></li>
<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>CSS Triangle</span></a></li>
<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Fontawesome</span></a></li>
<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Kamus HTML</span></a></li>
</ul>
</li>
<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>SEO</span></a></li>
<li><a href='YOU URL HERE' itemprop='url' target='_blank'><span itemprop='name'>Template</span></a></li>
<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Tips Blogger</span></a></li>
<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Widget</span></a></li>
<li><a href='YOU URL HERE' itemprop='url' target='_blank'><span itemprop='name'>Cekkembali.com</span></a></li>
</ul>
<form action='YOU URL SEARCH' id='search-form'>
<input name='cx' type='hidden' value='partner-pub-015677962493346910872:l4_ho9aq0bm'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<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='';' type='text' value='Search...'/>
</td>
<td class='search-button'>
<input id='search-button' type='submit' value=''/>
</td>
</tr>
</tbody>
</table>
</form>
</nav>Langkah ketiga :
Copy kode Javascript di bawah ini diatas kode
</body><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>Silakan Anda Save. Jika terjadi error, atau tidak responsivenya navigasi tersebut, Anda bisa berkomentar dibawah. Setahu saya tutorial ini tidak ada yang error, soalnya sudah saya testing terlebih dahulu di blog Template Cloaning Arlina Design.
Post a Comment