Navigation: Cara Membuat Menu Navigasi ala Evo Mag

Cara membuat menu navigasi responsif ala theme Evo Mag

Menu navigasi ala theme Evo Mag pada umumnya sudah banyak yang menggunakan, dari blogger pemula sampai pada pakar blogger,"menu navigasi ala theme Evo Mag" ini terbilang menarik dari segi tampilan hingga fungsi submenu yang terkandung di dalamnya.setiap blogger atau website memang harus memiliki menu navigasi dan submenu, agar dapat memudahkan pengunjung menelusuri setiap isi atau kategori dari artikel yang di buat,namun menu navigasinya pun harus  benar-benar responsif hingga tidak menyulitkan pengunjung untuk berselancar di web blog atau website, dengan begitu blog  akan terlihat seperti blog profesional dan keren.

Menu navigasi Evo Mag adalah navigasi yang memiliki fitur Dropdown yang lengkap dari menu,submenu,dan kotak pencarian seperti halnya "google search engine (Mesin Mencari Google),SERPs".menu navigasi Evo mag sebenarnya di rancang khusus untuk template Evo mag, tetapi semenjak template ini di bagikan gratis oleh "Mas Sugeng",banyak para desainer template yang memodifikasi ulang hingga dapat digunakan di berbagai jenis template, dari template default blogger sampai ke template yang di unduh free atau berbayar.

Menu navigasi theme Evo mag jika dilihat memiliki fitur yang memenuhi algoritma google terbaru atau memenuhi "200+ google rangking faktor"(SEO) template web blog atau website.

Apa sih Fungsi Menu Navigasi?

Beberapa fungsi menu navigasi untuk blog atau website,yaitu sebagai berikut;

• Blog atau website yang memiliki menu navigasi akan terlihat sebagai web blog yang profesional.
• Mudah mendapatkan sitelink, blog yang memiliki menu navigasi yang terstruktur dan jelas akan mudah mendapatkan sitelink,atau sitelink paling banyak di dapat memang terletak pada menu navigasi.
• Memudahkan pengunjung blog untuk menelusuri isi dari setiap konten/artikel yang dimiliki oleh web blog/website tersebut.

Secara sepintas pengunjung akan cepat memahami kategori konten/artikel yang berada di dalam blog, jadi upayakan membuat/memasang menu navigasi yang jelas dan responsif, karena menu navigasi yang jelas dan responsif dapat dengan mudah menyesuaikan menurut resolusi layar yang tertinggi hingga pada resolusi layar yang terendah.dengan anda memiliki menu navigasi seperti yang kami maksud, itu dapat memberikan nilai plus untuk blog atau website yang dimiliki.

Apakah wajib dan penting sebuah blog atau website memiliki menu navigasi?

Menu navigasi wajib dan penting untuk di terapkan pada blog karena sangat berperan dalam sebuah web blog, jika Anda adalah orang yang ingin mengelola blog di situs Blogger,menu navigasi adalah hal pertama yang harus dipikirkan karena dengan menu navigasi seluruh isi blog (konten/artikel) dapat tersaji di dalam satu wadah yang sangat mudah untuk di telusuri.

Untuk web blog yang membahas topik campuran atau gado-gado,menu navigasi ala theme Evo Mag adalah solusi terbaik yang harus diperhatikan, dengan membuat/menerapkan "menu navigasi ala theme Evo Mag" yang kami bagikan ini,anda sudah dapat membuat/memasang link-link yang mengarah ke seluruh konten/artikel campuran yang dimiliki.dan hal ini tentu saja akan memudahkan pengunjung menelusuri apa yang mereka cari.

Bagaimana cara membuat menu navigasi ala theme Evo Mag?

Menu navigasi pada blogspot.com pada awalnya hanya pemberian label atau memasang link-link yang mengarah ke konten/artikel yang ingin di tampilkan pada homepage, itupun dapat anda lakukan melalui penambahan widget atau gadget melalui layout tata letak,hal inilah yang membuat para blogger dari seluruh kalangan berlomba-lomba coding theme blogger agar mendapatkan hasil tampilan yang menarik.

"Cara membuat menu navigasi blog keren" ala theme Evo Mag

Sebenarnya untuk "membuat menu navigasi blogger" sangatlah mudah,hanya saja kita membutuhkan ketelitian untuk memasang kode HTML dalam template, biasanya dan pada umumnya menu navigasi theme blogger terpasang di bawah header atau di bawah body.

Untuk web blog yang masih menggunakan template bawaan blogspot tentu menu navigasi pada blog belum dimiliki,dan apabila ingin membuat menu navigasi dibawah header atau bawah body blog,maka ada kode CSS, HTML dan kode JavaScript yang harus disisipkan dalam template.

Jika anda berniat memasang atau mengantikan menu navigasi anda,maka langkah pertama yang harus dilakukan adalah pasang  kode CSS dibawah ini tepatnya diatas kode ]]</b:skin> atau </style>.

/* Navigasi Black As Kariting */
.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}
@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}}

Setelah kode script sudah dipasang diatas ]]</b:skin>  maka langkah kedua pasang HTML dibawah ini tepatnya di bawah kode </header>, atau bawah <body> blog.

<nav id='nav'>
<a class='toggleMenu' href='#'><i class='fa fa-th-list'/> Menu</a>
<!-- secondary navigation menu start -->
<ul class='nav nav-menu2'>
<li><a class='active' href='/'><i class='fa fa-home'/> Home</a></li>
<li><a href='#'>Menu1</a>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
</li>
<li><a href='#'>Menu4</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
<li><a href='#'>SubMenu4</a></li>
</ul>
</li>
<li><a href='#'>Menu5</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu6</a></li>
<li><a href='#'>Menu7</a></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==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='SEARCH...' vinput=''/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
</nav>

Tips: gantikan kode HTML menu navigasi yang lama dengan kode HTML menu navigasi di atas.

Selanjutnya,pasang JavaScript dibawah ini tepatnya di atas kode </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>

Langkah terakhir, copy dan paste JavaScript font awesome di bawah ini tepatnya diatas kode </head>.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"></link>

Simpan template dan lakukan pratinjau, apakah menu navigasi sudah terpasang dengan benar?

Info:Pemasangan kode HTML menu navigasi dapat anda letakkan sesuai keinginan,entah di bawah header,di bawah body,ataupun mengantikan kode HTML yang lama dengan yang baru,hal terpenting adalah carilah tempat yang memang benar-benar menu navigasi tersebut dapat berfungsi dengan baik.

Cara mengatur menu navigasi ala theme Evo Mag

Berikut ini adalah cara mengatur atau memasang link-link ke label/halaman.

1. Masuk situs blogger.
2. Sentuh fitur theme yang terdapat pada bila sisi kiri daftar menu.
3. Tab baru yang terbuka adalah dasbor theme,sentuh "edit HTML" tepatnya di samping tombol orange "sesuaikan".
4. Tab baru yang terbuka adalah editor HTML,cari kode HTML menu navigasi seperti yang telah kami tuliskan di atas.
5. Gantikan tanda pagar (#) dengan link label atau halaman anda, serta gantikan menu1 atau submenu1 dengan nama label atau halaman.
6. Yang terakhir,Sentuh tombol orange simpan.

Demikian postingan artikel kali ini yang dapat kami bagikan, jika ada pertanyaan anda dapat menuliskan nya di form komentar yang telah kami sediakan di bawah.

Baca juga: 10 daftar isi blog keren untuk situs blogger-blogspot.

Semoga bermanfaat!