Cara Membuat Menu Navigasi di Blog + Dropdown Resposive

Cara Membuat Menu Navigasi di Blog + Dropdown- Kali ini penulis akan sharing lagi mengenai blogging nih setelah sebelumnya telah membagikan artikel mengenai bagaimana cara membuat template blog sendiri lengkap. Bisa di baca artikel nya di sini. Nah bisa di katakan bahwa ini adalah kelanjutan dari artikel tersebut, yang dimana ini merupakan cara untuk membuat tampilan blog menjadi bagus, nyaman di pandang serta SEO.

Menu navigasi di blog ini sangat bagus sekali untuk dibuat karena selain membuat tampilan blog kita menjadi rapi, membuat navigasi juga membuat blog kita menjadi SEO friendly dan ini merupakan recomendasi dari para master SEO. Mari kita lihat terlebih dahulu beberapa kegunaan daripada menu navigasi ini.

Kegunaan Menu Navigasi

1. Membuat tampilan blog menjadi rapi dan keren
2. Memudahkan para pengunjung untuk menjelajahi seluruh halaman artikel blog
3. Memberikan kemudahan bagi pengunjung untuk melihat menu-menu apa saja yang ada di dalam blog
4. Membuat blog tampil lebih SEO Friendly bagi pengunjung maupun crawl google

Di atas telah di jelaskan sedikit mengenai menu navigasi blog, sekarang mari kita ke materi saja untuk membuat menu tersebut, patikan untuk membacanya secara perlahan dan cermat agar tidak terjadi kesalahan pada saat mempraktekkannya. Di bawah adalah tampilan menu yang akan kita buat

Tampilan Menu Yang Akan di Buat

Cara Membuat Menu Navigasi di Blog

1. Buka blog teman-teman lalu menuju ke menu Template > Edit HTML
2. Cari lah kode di bawah ini dengan menggunakan keyboad CTRL+F.
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
3. Setelah ketemu ganti kode nya dengan kode di bawah ini
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
4. Setelah selesai cari lagi kode berikut  ini ]]></b:skin>
5. Copy paste code di bawah ini tepat di atas kode yang baru saja di cari
/*-----Responsive Menu ----*/
body {margin: 0px;}
#menu{background: #50B7DC;color: #FFF;height: 40px;border-bottom: 2px solid #DDD;box-shadow: 1px 2px 9px #B1B1B1;border-top: 2px solid #DDD;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}
#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;
background: #5FC6EB;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;}
#menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none;
text-shadow: none;border-bottom: 1px dashed #31AFDB;}

#menu ul.menus a{color: #FFF;line-height: 35px;}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;}

@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
6. Catatan : Untuk kode yang berwarna merah bisa tema-teman ganti sesuka hati, kode tersebut adalah kode warna.
7. Selanjutnya cari lagi kode <body> dan copy paste kan kode berikut tepat dibawah kode <body> tersebut.
<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigasi&#160;Menu</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Tentang</a></li>
<li><a href='#'>Menu Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
</ul>
</li>
<li><a href='#'>Kontak</a></li>
<li><a href='#'>Blog <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Blog 1</a></li>
<li><a href='#'>Blog 2</a></li>
<li><a href='#'>Blog 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
</ul>
</nav>
8. Catatan : Untuk Tanda (#) silahkan teman-teman ganti dengan link url yang teman-teman inginkan dan untuk namanya juga sama.
9. Setelah semua selesai klik save template atau bisa langsung klik pratinjau template untuk melihat hasilnya.

Cara Membuat Menu Navigasi di Blog- Itu adalah cara membuat menu nya dan semoga bisa di di praktekkan dan bisa dipahami dengan mudah, mungkin bila baru pertama mengedit template akan merasa kesulitan tetapi bila sudah terbiasa akan mudah kok soalnya kan cuman copy paste kode saja dan edit beberapa kode. Masih banyak juga tampilan dari membuat menu ini, kita akan buat lagi di artikel berikutnya. Pastikan selalu di blog kami ya, kalo bisa bookmark karena tempat belajar cara blog semua ada di sini.

Baca artikel sebelumnya : Cara Membuat Template Sendiri