Type something and hit enter

author photo
By
Cara Membuat Menu Navigasi- Para blogger umum di setiap blog yang mereka kelola pasti ada Menu Navigasi untuk melengkapi fitur yang ada dalam blog nya, tak jarang para blogger mencari cara untuk membuat menu navigasi untuk blog nya terutama para blogger pemula.

membuat menu navigasi

Seperti pengalaman Masmient pada tahun 2014 sampai 2016 an saat itu Masmient kesana kesini untuk mencari cara membuat menu navigasi menggunakan css lah dengan javascrip lah dengan cara membuat menu navigasi yang keren lah yang responsive lah dll, karena apa ? saat itu Masmient sendirian dan ga ada kawan jadi hanya cari tutornya di blogger, apalagi Masmient sama sekali gak paham Coding.

Kenapa saya dulu sibuk mencari cara membuat Menu Navigasi untuk blog saya?

Karena saat itu Masmient sedang gencar-gencarnya memodifikasi template bawaan blogger yang mana belum di lengkapi dengan menu navigasi , dan menggunakan template gratisan tapi ada credit link nya dan saya berfikiran kalo blog saya nanti di anggap buruk sama google, padahal sebenernya gak juga.

Karena sering ganti-ganti template blogger al hasil masmient berhenti ngeblog di tahun 2016 karena pengunjung tak kunjung datang, ya mungkin karena sering ganti template itu, jadi buat kawan-kawan blogger pemula kalau boleh saran jangan sampai kita ganti-ganti template melulu dengan alasan apapun.

Baiklah kawan semua, di sini Masmient akan sedikit membahas tentang Menu Navigasi di Blogger, yang akan kita bimbing cara membuat nya, eh kok membimbing saya kan gak ahli coding ya, enak nya gini aja saya ulangi ya.

Oke lah kawan semua mari kita sedikit membahas tentang Menu Navigasi dan cara membuat nya.

Kayak nya lebih simpel.... hhee



Pengertian Menu Navigasi Dan Beberapa Fungsi nya

Menu Navigasi adalah bagian dari web atau blog yang berisi link untuk mengarah kesuatu kategori atau yang lain nya.

Biasanya menu navigasi tersusun rapi dengan terstruktur dan yang di dalam nya berisi link yang mengarah ke kategori, label, artikel langsung, atau yang lain nya.

Dan pada umum nya menu navigasi di letakan di bagian atas halaman web/blog. entah di bawah header ataupun di atas header.

Terkadang ada yang meletakan menu navigasi hanya di atas header , hanya di bawah header dan ada dan yang paling umum di letakan di keduanya (bawah header dan atas header), namun pada saat ini di template yang terbaru buatan sugeng.id itu menu navigasi nya di letakan di paling atas dan menggantung di sana.

Untuk kelengkapan Menu Navigasi di atas header biasanya berisi kelengkapan seperti sitemap,about,contact,privacy policy dan sejenis nya dan terkadang ada juga yang di tambahkan dengan icon sosial media seperti facebook,googleplus,twitter dll. guna untuk memfolosi pemilik blog.

Sedangkan untuk menu navigasi di bawah header biasanya di lengkapi dengan menu-menu pilihan berdasar kan label,blog lain dll. dan di taruh search bok di dalam nya guna untuk mempermudah pengunjung untuk mencari artikel lain nya.

Fungsi Menu Navigasi Untuk Blog


Menu Navigasi ini memiliki beberapa fungsi dan tujuan untuk blog itu sendiri, dan berikut beberapa fungsi dan tujuan menu nafigasi di dalam blog.

1. Blog Terlihat Profesional


Untuk blog yang di lengkapi menu navigasi akan terlihat profesional oleh google dan pengunjung, karena dengan melengkapi nya blog akan terlihat elegan dan selain itu juga blog akan terlihat keren dan cantix serta tersusun rapi dan jika di lihat oleh orang awam akan terlihat wow karena akan terlihat seperti web-web besar sedangkan hanya blog sederhana seperti blog Masmient ini yang template nya hasil dari gratisan yang di sediakan oleh sugeng.id

2. Mempermudah Mendapat Hadiah Sitelink


Blog yang di lengkapi dengan Menu Navigasi akan mempermudah mendapatkan sitelink dari google, sitelink adalah hadiah yang berharga bagi sebuah blog, karena di dalam menu navigasi terdapat yang paling banyak yaitu site.

3. Mempermudah Pengunjung untuk Menemukan Suatu artikel yang Di Kategorikan


Hanya dengan melihat menu navigasi dalam blog kita pengunjung dengan mudah nya melihat dan memahami kategori-kategori artikel yang terdapat di dalam blog, sehingga pengunjung bisa mengerti oh ini toh isi dari blog ini, oh ini toh yang di bahas dalam blog ini dll.

4. Mempermudah Daftar Google Adsense


Untuk tujuan Menu Navigasi yakni jika para blogger yang ingin menjadi publiser Google Adsense maka blog yang akan di daftarkan ke google adsense harus di lengkapi dengan menu navigasi dan berisi link-link tertentu, agar bisa di setujui oleh Google Adsense.

Setelah kita mengetahui apa itu menu navigasi, fungsi dan tujuan menu navigasi maka selanjut nya mari kita menuju ke pon utama, yaitu tentang bagaimana cara membuat menu navigasi untuk blogspot yang responsive dan seo frendly.

Cara membuat Menu Navigasi Responsiv Untuk Blog

Ada beberapa cara untuk membuat menu navigasi yang keren di blogger dan beberapa tampilan menu navigasi yang responsive di blogspot, namun di sini Masmient akan berbagi untuk cara membuat navigasi menggunakan css ataupun yang lain nya.

Cara Membuat Menu Navigasi Diatas Header

menu navigasi di atas header


1. Masuk ke blogger.com dan pilih Tema dan Edit HTML

2 Cari kode ]]></b:skin> 
*tekan CTRL+F untuk memperudah pencarian

3. Letakan Kode CSS di bawah ini tepat di atas kode ]]></b:skin>


Kede CSS
ul.topnav {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}ul.topnav li {float: left;}ul.topnav li a {display: inline-block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;transition: 0.3s;font-size: 17px;}ul.topnav li a:hover {background-color: #555;}ul.topnav li.icon {display: none;}@media screen and (max-width:680px) {ul.topnav li:not(:first-child) {display: none;}ul.topnav li.icon {float: right;display: inline-block;}}@media screen and (max-width:680px) {ul.topnav.responsive {position: relative;}ul.topnav.responsive li.icon {position: absolute;right: 0;top: 0;}ul.topnav.responsive li {float: none;display: inline;}ul.topnav.responsive li a {display: block;text-align: left;}}


4. Setelah kode di atas di pasang di atas kode ]]></b:skin>, maka langkah selanjut nya >>

5. Cari kode <body>

6. Letakan Kode HTML di bawah inti tepat di bawah kode <body>

Kode HTML
<ul class="topnav" id="myTopnav">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Totorial</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li> <li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
</li>
</ul>
Ket.
Ganti tanda # yang berwarna biru dengan link yang sobat inginkan
Ganti Nama yang berwrna merah dengan nama yang sobat mau (sesuaikan dengan link)
Sumber kode : https://mbiliyoraruben.blogspot.co.id/2017/09/menu-navigasi-blog.html

7. Setelah di pasang maka seanjut nya, Letakan Kode Java Scrip di bawah ini tepat di atas kode </body>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
8. Save Tema

Selesai !

Cara Membuat Menu Navigasi Ala Evo Magz

menu navigasi di bawah header



1. Masuk Edit HTML

3.Cari kode ]]></b:skin> atau </style>
*tekan ctrl+f untuk mempermudah pencarian

4. Letakan kode css di bawah ini tepat di atas kode ]]></b:skin> atau </style>

Kode CSS
/* 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}

5. Untuk memanggil css di atas silahkan pasang kode HTML di bawah ini tepat di bawah kode </header>
*caranya sama dengan yang di atas tekan ctrl+f dan cari kode </header>

Kode 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='masyadi.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>
<li><a href='#'>Menu 3</a></li>
<li><a href='masyadi.com'>Markup</a></li>
<li><a href='masyadi.com'>Error Page</a></li>
<li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html'>Static Page</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==&#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 tanda # dengan link sobat
*ganti yang berwarna merah dengan nama menu sobat

6. Setelah nya Save Template ya

Sebenernya dengan cara di atas sobat sudah cukup unuk membuat menu navigasi ala evomagz, namun jika kawan semua ingin membuat menu navigasi ala evomagz responsive maka kawanku semua harus menggunakan uorial di bawah ini

Cara Membuat Menu Navigasi Ala EvoMagz Responsive


1.Masuk Edit HTML

2. Cari kode </body dan letakan kode di bawah ini teat 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><script src='https://googledrive.com/host/0BxH5pEKXqBWUSUhtOTZFOUw5QkU/menu-navigasi-evo-magz-masyadi-com.js'></script>

3.Pasang kode queri responsive nya, dengan cara

4. Cari kode ]]></b:skin> atau </style> dan letakan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

@media only screen and (max-widt
h: 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; }

5. Lalu pasang kode java scrip fon awesome di bawah tepat di atas kode </head>.
Karena menu Navigasi di atas menggunakan font awesome

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

6. Save Template Sobat ya..

Selesai !

Sampai di sini usai sudah untuk cara membuat menu navigasi di blog dan cara ini insya alloh work ya..

Semoga rtikel ini bisa membantu kawan semua dalam membuat menu navigasi responsive untuk blog sobat dan semoga blog sobat terus berkembang.... terimakasih...

Oh iya jika besok ada kesempatan lagi rencana Masmient akan menambah beberapa model menu Navigasi lain nya ya... biar lengkap...

Maaf sumber kode saya dapat dari salah satu blog di google, mohon maaf jika tidak bisa menyebutkan namanya karena lupa.. hhe


Click to comment