Home Blog Cara Membuat Menu Navigasi Seperti Evo Magz di Blog

Cara Membuat Menu Navigasi Seperti Evo Magz di Blog

by Mas Admin
Cara Membuat Menu Navigasi Sebagaimana Evo Magz di Blog Cara Membuat Menu Navigasi Sebagaimana Evo Magz di Blog

Cara Membuat Menu Navigasi Sebagaimana Evo Magz di Blog – Menu Navigasi di Blog, merupakan menu yang berguna untuk membantu pembaca dalam mencari suatu kategori artikel pada blog tersebut. Dengan menambah fitur ini, Blogger dapat menunjukkan label atau kategori utama apa saja yang ingin ditunjukkan kepada pembaca.

Ada kaya sekali versi dari navigasi blog. mulai dari tampilan yang simpel, biasa, sampai kemudian ada yang menggunakan navigasi blog versi dropdown.

Apa sih maksutnya navigasi dropdown itu ?

Bebeginilah. Maksudnya merupakan ketika kamu mengarahkan kursormu ke tempat dimana menu navigasi berada, contoh saja yang bertuliskan Blog. Nah, maka akan muncul sub – sub menu lainnya. Entah itu dibawah atau disamping menu utama tersebut.
Hal itu berguna apabila blog atau websitemu terdapat kategori atau label utama yang dapat diturunkan lagi menjadi sub – sub menu yang lebih simpel. Nah, kali ini kita akan bahas cara menciptakan menu navigasi ala template Evo Magz dari Mas Sugeng.

Kamu tentu sudah tahu bukan seputar template buatan Mas Sugeng yang satu ini bukan ? Itu lho, template yang penjualannya laku keras dan sangat diminati.

Catatan !
Saya tak bermaksud untuk menduplikat template premium milik Mas Sugeng, melainkan hanya sekedar ingin berbagi tentang navbarnya saja


Oke, berikut merupakan ” Cara Membuat Menu Navigasi Sebagaimana Evo Magz di Blog ” :

Cara Membuat Menu Navigasi Sebagaimana Evo Magz di Blog Cara Membuat Menu Navigasi Sebagaimana Evo Magz di Blog
anggasave.com


1. Buka blogger.com
2. Pilih menu Tema atau Template
3. Cari dan pilih Edit HTML
4. Cari kode berikut ]]></b:skin> atau </style> (Tekan tombol CTRL+F agar lebih mudah)
5. Copas kode berikut tepat diatas salah satu kode yang baru saja :

CSS
@media only screen and (max-width: 768px) {
      .nav { float: none; width: 100%; max-width: 100%; }.active { display: block; }#search-form { width: 100%; margin: 0 0 0 0 !important; }.nav li ul:before { display: none; }.nav > li { float: none; overflow: hidden; }.nav ul { display: block; width: 100%; float: none; }.nav-menu2 li ul { background: #eee; border: none; box-shadow: none; }.nav-menu2 li li ul { background: #f5f5f5; }.nav-menu2 li li a:hover { background: #ddd; }.nav > li.hover > ul, .nav li li.hover ul { position: static; }#search-form { width: 100%; background: #444; }#search-form td.search-box { padding: 0 10px !important; }#search-form td.search-button { padding: 0 10px; width: 1%; }#search-form input#search-box[type=”text”] { margin: 0 0 0 0; }#search-form input#search-button[type=”submit”] { margin: 0 0 0 0; }
}

/* NAVIGATION MENU 2 */
.toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important}
#nav{font:normal bold 12px Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px}
.nav-menu2{background:#333333;list-style:none;margin:0 0 0 0;*zoom:1;float:left}
.nav-menu2:before,.nav-menu2:after{content:” “;display:table}
.nav-menu2:after{clear:both}
.nav-menu2 ul{list-style:none;margin:0 0 0 0;width:12em}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0 0}
.nav-menu2 > li{float:left}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0 #333333 inset}
.nav-menu2 > li > a.active{background:#222222;box-shadow:0 4px 0 #E73138 inset}
.nav-menu2 > li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 inset}
.nav-menu2 li ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-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;border:1px solid #d9d9d9;border:1px solid rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 > li.hover > ul{visibility:visible;opacity:10}
.nav-menu2 > li > ul:before{content:””;width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;display:block}
.nav-menu2 li li.hover ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#333;position:relative;z-index:100;line-height:32px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .parent:after{content:”\f107″;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
#search-form{background:#333333;float:right;margin:0 0;width:200px}
#search-form table{width:100%;margin:0 0 0 0}
#search-form td.search-box{padding-right:30px}
#search-form input#search-box[type=”text”]{background:#ffffff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none}
#search-form input#search-button[type=”submit”]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px 10px 5px 0;padding:0 12px;border:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s}
#search-form input#search-button[type=”submit”]:hover{background:#222222;cursor:pointer}
#search-form input#search-box[type=”text”]:focus{background:#eee;outline:none}
6. Cari kode </header>
7. Copas kode berikut tepat dibawah kode </header>

HTML
<nav id=’nav’>
<a class=’toggleMenu’ href=’#’><i class=’fa fa-th-list’></i> Menu</a>
<!– secondary navigation menu start –>
<ul class=’nav nav-menu2′>
<li><a class=’active’ href=’cariupdate.com’><i class=’fa fa-home’></i> Home</a></li>
<li><a href=’#’>Menu 1</a>
<ul>
<li><a href=’#’>Sub Menu 1</a></li>
<li><a href=’#’>Sub Menu 2</a></li>
<li><a href=’#’>Sub Menu 3</a></li>
</ul>
</li>
<li><a href=’#’>Menu 2</a>
<ul>
<li><a href=’#’>Sub Menu 1</a>
</li>
<li><a href=’#’>Sub Menu 2</a></li>
<li><a href=’#’>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<!– secondary navigation menu end –>
<form action=’/search’ id=’search-form’ method=’get’ style=’display: inline;’><table><tbody><tr><td class=’search-box’><input id=’search-box’ name=’q’ onblur=’if(this.value==&#39;&#39;)this.value=this.defaultValue;’ onfocus=’if(this.value==this.defaultValue)this.value=&#39;&#39;;’ type=’text’ value=’Search…’ vinput=”/></td>
<td class=’search-button’><input id=’search-button’ type=’submit’ value=’’/></td></tr></tbody></table></form>
</nav>
Ganti cariupdate.com dengan link blogmu, Menu 1 dan Menu 2 dengan nama label di blogmu, Sub Menu nya juga mengganti terserah, # sebelum kata Menu dan sub Menu isi dengan link label blogmu.

8. Copas kode berikut dan letakkan tepat diatas kode </body> (Hal ini agar navigasi menjadi responsive)

HTML
<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 src=’https://googledrive.com/host/0BxH5pEKXqBWUSUhtOTZFOUw5QkU/menu-navigasi-evo-magz-masyadi-com.js’></script>

9.  Selesai

Catatan !
Jika anda belum memasang font awesome, copas kode dibawah ini :

<link href=’//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css’ rel=’stylesheet’/>l
Letakkan tepat diatas kode </head>
10. Klik simpan atau pratinjau untuk melihat hasilnya


You may also like