Dikarenakan ada request cara membuat menu navigation di samping header seperti template evo magz redesign yang saya buat, maka dari itu saya membuat tutorial ini untuk memudahkan Anda membuatnya tanpa ada error ataupun yang lainnya.
Baca juga : Membuat Menu Navigasi Seperti Arlina Design
Navigasi ini sudah di lengkapi dengan search button yang simple & keren, berguna untuk Anda mencari sebuah postingan di blog Anda. Dan jangan lupa, widget ini di lengkapi dengan header/judul blog, berguna untuk mencari sebuah postingan terbaru di blog Anda.
Navigation Menu di Samping Header
Silakan pahami tutorial ini dengan baik untuk mendapatkan hasil yang memuaskan, jika mengalami error, silakan berkomentar dibawah, secepatnya akan saya tanggapi jika saya sedang online.
1. Login ke Blogger > Tema > Edit HTML
2. Silakan cari kode
</style> atau ]]></b:skin>3. Lalu Copy dan Paste kode dibawah ini di atas kode tersebut
/* NAVIGATION MENU */
.nav_wrapper{position:fixed;left:0;top:0;width:100%;transition:top .5s ease-out;background:#fff;border-bottom:1px solid #dedede;border-top:2px solid #ed4441;z-index:9999;text-decorati}
.fixed-top{background:#fff;margin:0 auto;padding:0;width:100%;height:auto;border-top:2px solid transparent;border-bottom:1px solid #dedede;position:fixed;top:0;left:0;z-index:9999}
#head-mt{padding:0;margin:0;width:100%}
.menu-header{width:100%;max-width:1050px;margin:0 auto}
nav{width:100%}
.scroll{top:0}
.no-scroll{top:0;z-index:9999}
.btn{padding:10px 1%;margin:5px;color:#ed4441;text-decoration:none;font-family:sans-serif;transition:all .1s ease}
.btn:hover{transition:all .1s ease;}
#search{float:right;font-size:30px;padding:2px 15px;line-height:40px;color:#ed4441;margin:0;font-weight:700;-webkit-transform:rotate(181deg);-moz-transform:rotate(181deg);-ms-transform:rotate(181deg);-o-transform:rotate(181deg);transform:rotate(181deg)}
#search:hover{color:#af2826}
.search_box{clear:both;width:100%;padding:0;margin:0;height:0;overflow:hidden;transition:all .1s ease-in-out}
.search_box.active{height:auto;padding:15px 0}
.search_box input{width:80%;font-size:13px;margin:0 15px;padding:10px;border:1px solid #eee;background:#fff;font-family:'PT Sans',sans-serif;color:#666;}
.search_box input:focus{outline:none}
.search_box input.search_icon{clear:both;width:10%;height:auto;padding:10px;margin:0;margin-left:-5px;border:none;color:#fff;cursor:pointer;background:#ed4441;opacity:1;transition:all .1s ease}
.search_box input.search_icon:hover{background:#af2826}
.menu-link{display:none}
.spinner-master input[type=checkbox]{display:none}
.menu{background:#ffffff;width:100%;height:auto;transition:all .3s ease}
.menu ul{font:normal bold 14px PT Sans;padding:0;margin:0;list-style:none;position:relative;display:inline-block;}
.menu > li > ul.sub_menu{min-width:10em;padding:4px 0;background-color:#f4f4f4;border:1px solid #fff}
.menu ul li{padding:0}
.menu > ul > li{display:inline-block}
.menu ul li a{display:block;text-decoration:none;color:#ed4441;font-size:14px}
.menu ul li a:hover{background:#ed4441;color:#ffffff;}
.menu ul li.hover > a{background:#ed4441;color:#ffffff;}
.menu ul li > a{padding:15px 10px}
.menu ul ul{display:none;position:absolute;top:100%;min-width:160px;background:#ed4441}
.menu ul li:hover > ul{display:block}
.menu ul ul > li{position:relative}
.menu ul ul > li a{padding:10px 15px;height:auto;background:#ed4441;color:#fff}
.menu ul ul > li a:hover{background:#ed4441;color:#fff}
.menu ul ul ul{position:absolute;left:100%;top:0}
.menu a.fud{background:#fff;color:#228aff;border:1px solid #228aff;padding:6px 6px 5px;border-radius: 3px;margin-left: 3px;}
.menu a.fud:hover{background:#228aff;}
.menu a.active{background:#fff;color:#ed4441;border:1px solid #ed4441;padding:6px 6px 5px;border-radius: 3px;margin-left: 3px;}
.menu a.active:hover{background:#ed4441;}
.menu a.idn{background:#fff;color:#ff0036;border:1px solid #ff0036;padding:6px 6px 5px;border-radius: 3px;margin-left: 3px;}
.menu a.idn:hover{background:#ff0036;}
.menu a.cbd{background:#fff;color:#00a9e0;border:1px solid #00a9e0;padding:6px 6px 5px;border-radius: 3px;margin-left: 3px;}
.menu a.cbd:hover{background:#00a9e0;}Lalu silakan Anda cari kode @media only screen and (max-width:768px){ lalu copas kode dibawah ini di bawah kode tersebut
.nav{float:none;width:100%;max-width:100%}
.active{display:block}
.example-header .container{width:100%}
#search{padding:10px}
.spinner-master *{transition:all 0.3s;box-sizing:border-box}
.spinner-master{position:relative;margin:15px;height:30px;width:30px;float:right}
.spinner-master label{cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:5px;left:0}
.spinner-master .spinner{position:absolute;height:4px;width:100%;padding:0;background-color:#ed4441}
.spinner-master .diagonal.part-1{position:relative;float:left}
.spinner-master .horizontal{position:relative;float:left;margin-top:4px}
.spinner-master .diagonal.part-2{position:relative;float:left;margin-top:4px}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin >.horizontal{opacity:0}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin >.diagonal.part-1{transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:10px}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin >.diagonal.part-2{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:-12px}
a.menu-link{display:block;color:#fff;float:left;text-decoration:none;padding:10px 16px;font-size:1.5em}
a.menu-link:hover{color:#333}
a.menu-link:after{content:"\2630";font-weight:normal}
a.menu-link.active:after{content:"\2715"}
.menu{clear:both;min-width:inherit;float:none}
.menu,.menu >ul ul{overflow:hidden;max-height:0;background-color:#f0f0f0}
.menu >li >ul.sub-menu{padding:0;border:none}
.menu.active,.menu >ul ul.active{max-height:55em}
.menu ul{display:inline}
.menu li,.menu >ul >li{display:block}
.menu >ul >li:last-of-type a{border:none}
.menu li a{color:#fff;display:block;padding:0.8em;position:relative}
.menu li.has-submenu >a:after{content:'+';position:absolute;top:0;right:0;display:block;font-size:1.5em;padding:0.55em 0.5em}
.menu li.has-submenu >a.active:after{content:"-"}
.menu ul ul >li a{background-color:#f0f0f0;padding:10px 18px 10px 30px}
.menu a.fud,.menu a.idn,.menu a.active,.menu a.cbd{background:#f0f0f0;color:#ed4441;border:none}
.menu a.fud:hover,.menu a.idn:hover,.menu a.active:hover,.menu a.cbd:hover{background:#eee}
.menu ul li a:hover{background:#eee}
.menu ul li.hover >a{color:#333}
.menu ul ul,.menu ul ul ul{display:inherit;position:relative;left:auto;top:auto;border:none}
.search_box{position:absolute;top:60px;left:0;z-index:10;background:#f0f0f0;border-bottom:2px solid #ddd}
.search_box input{width:65%}
.search_box input.search_icon{width:17%}}Silakan cari tag Stylenya yang tidak ada tag conditional untuk postingan, dikarenakan CSS ini digunakan untuk disemua halaman.
4. Silakan Anda cari kode </body>
5. Lalu Copy dan Paste kode Javascript dibawah ini di atas kode tersebut
<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>
<script type='text/javascript'>
$("ul li:has(ul)").addClass("has-submenu");$("ul li ul").addClass("sub-menu");$("ul.dropdown li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});var $menu=$("#menu"),$menulink=$("#spinner-form"),$search=$("#search"),$search_box=$(".search_box"),$menuTrigger=$(".has-submenu > a");$menulink.click(function(e){$menulink.toggleClass("active");$menu.toggleClass("active");if($search.hasClass("active")){$(".menu.active").css("padding-top","50px")}});$search.click(function(e){e.preventDefault();$search_box.toggleClass("active")});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")});$("ul li:has(ul)");$(function(){var e=$(document).scrollTop();var t=$(".nav_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".nav_wrapper").css("position","fixed")}else{$(".nav_wrapper").css("position","fixed")}if(n>t){$(".nav_wrapper").addClass("scroll")}else{$(".nav_wrapper").removeClass("scroll")}if(n>e){$(".nav_wrapper").removeClass("no-scroll")}else{$(".nav_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
</script>6. Jika sudah, Copy dan Paste kode dibawah ini ke bawah kode <body> atau <body..
<div class='nav_wrapper' id='navimenu'>
<div id='head-mt'>
<div class='menu-header'>
<!-- header wrapper start -->
<header itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<div id='header-wrapper'>
<div class='menu-header'>
<b:section class='header section' id='header' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Evo Magz (Header)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>-1</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</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' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</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' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</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>
<!--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'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='clear'/>
</div>
</header>
<!-- header wrapper end -->
<!-- navigation start -->
<!--<a class="menu-link" href="#menu"></a>-->
<div class='spinner-master'>
<input id='spinner-form' type='checkbox'/>
<label class='spinner-spin' for='spinner-form'>
<div class='spinner diagonal part-1'/>
<div class='spinner horizontal'/>
<div class='spinner diagonal part-2'/>
</label>
</div>
<a class='btn' href='#search_box' id='search'>☌</a>
<nav class='menu' id='menu' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<ul class='dropdown'>
<li><a href='/search/label/Berita%20Unik' itemprop='url'><span itemprop='name'>Berita Unik</span></a></li>
<li><a href='/search/label/Islam' itemprop='url'><span itemprop='name'>Dunia Islami</span></a></li>
<li><a href='/search/label/Top%205' itemprop='url'><span itemprop='name'>Top 5</span></a></li>
<li><a href='/search/label/Video' itemprop='url'><span itemprop='name'>Video</span></a></li>
<li><a href='/search/label/Viral' itemprop='url'><span itemprop='name'>Viral</span></a></li>
<li><a class='active' href='http://otomotif.makintau.com' itemprop='url'><span itemprop='name'>OTO</span></a></li>
<li><a class='fud' href='http://www.fudfact.com' itemprop='url' target='_blank'><span itemprop='name'>FUD</span></a></li>
<li><a class='idn' href='http://www.idnetizen.com' itemprop='url' target='_blank'><span itemprop='name'>IDN</span></a></li>
<li><a class='cbd' href='http://www.combades.com' itemprop='url' target='_blank'><span itemprop='name'>CBD</span></a></li>
</ul>
</nav>
<!-- navigation end -->
<!-- search form start -->
<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<form action='https://www.google.com/search' class='search_box' id='search_box' method='get' target='_blank'>
<input name='as_sitesearch' type='hidden' value='https://demoevomagzredesign.blogspot.co.id/'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' placeholder='Cari disini....' required='required' type='text'/><input class='search_icon' type='submit' value='Cari'/></form>
</div>
<!-- search form end -->
</div>
</div>
</div>Silakan Anda ganti URL, sesuai selera Anda.
Untuk bagian Search, Anda bisa ganti URLnya denga URL blog Anda
Untuk bagian Search, Anda bisa ganti URLnya denga URL blog Anda
Terimakasih telah berkunjung, semoga bermanfaat untuk Anda :D
Post a Comment