Cara Membuat Menu Navigasi Responsive Sederhana di Blog

Cara Membuat Menu Navigasi Responsive Sederhana di Blog - Menu navigasi merupakan hal penting bagi sebuah blog. Bila sebuah blog tidak mempunyai menu navigasi maka akan menyulit pengunjung blog untuk menjelajahi semua isi konten yang ada dalam sebuah blog tersebut. Maka dengan adanya menu navigasi di dalam sebuah blog maka akan memudahkan pengunjung blog untuk mengetahui isi - isi yang ada di dalam blog kita. Maka dengan demikian ada kemungkinan page view blog kita akan bertambah.

Posisi menu navigasi ini memang sangat beragam, ada yang di atas header, ada pula ada yang di bawah. Selain itu ada juga sebagian blogger membuat menu navigasi pada bila samping blog. Semua itu menurut keinginan yang punya blog atau situs. Akan tetapi menu navigasi ini banyak kita jumpai pada sebuah blog atau situs berada di bagian atas.

Untuk tampilan menu navigasi pun sangat bermacam - macam. Sehingga dengan adanya menu navigasi blog akan terlihat lebih bagus dan rapi. Bagi seorang blogger tentunya tidak asing lagi yang namanya menu navigasi ini. Walaupun belum bisa membuat yang lebih bagus namun untuk membuat navigasi sederhana mungkin walaupun blogger pemula sudah bisa menguasai tutorial ini.

Baca juga : Cara Mudah Membuat Border dalam Postingan Blog dengan Macam-macam Border

Sudah banyak artikel yang pernah kita baca untuk tutorial membuat navigasi, namun ada yang bisa kita ambil tutorialnya dan ada pula yang tidak. Faktornya mungkin tidak sesuai yang kita inginkan, baik itu berupa tampilan maupun hal lainnya. Kadang kala membuat menu navigasi yang terlalu bagus juga tidak ada pengaruh bagi blog kita. Salah satu contoh yang sering pemula lakukan yaitu memperbagus tampilan blog dengan cara mendesainnya begitu bagus namun saat di cek pada pencarin google dan yang serupa ternyata tidak muncul blog atau website kita.

Walaupun tampilan blog kita tidak sebagus tampilan blog master - master namun blog kita bisa tampil di halaman pencarian google dan search engine yang lainnya, seperti bing, yahoo dan sebagainya. Nah dengan tampilnya blog kita di halaman pencarian google maka akan ada kemungkinan blog kita ramai pengunjung. Untuk membuat blog ramai pengunjung pun perlu melakukan optimasi pada blog kita. Karena dengan adanya SEO pada blog kita maka akan ada kemungkinan untuk tampil di halaman pertama google.

Dengan demikian pada artikel kali ini kita ingin menulis sedikit tutorial blog yang menyangkut dengan cara membuat navigasi sederhana dan memiliki desain yang responsive. Karena saat ini memiliki tampilan blog responsive lebih disukai karena sekarang banyak pengguna internet sudah menggunakan smartphone dengan berbagai macam dan ukura. Dengan menggunakan tampilan blog yang responsive maka akan ada kemungkinan menambah pengunjung blog kita.

Berikut ini kita akan menulis langkah - langkah yang dapat kita lakukan untuk membuat mennu navigasi responsive sederhana pada sebuah blog atau situs. Adapun langkah - langkahnya yaitu :

Pertama buka dulu akaun blogger dengan cara sign in terlebih dahulu. Sesudah akun blogger kita terbuka maka selanjut kita menuju pada menu Template yaitu Edit HTML. Sesudah itu cari kode </style> dan bila sudah ketemu maka pastekan kode berikut di atasnya :

<style type="text/css">
body{font-family:"Roboto",sans-serif!important;font-size: 100%;margin:0px;padding:0px;}
/*Navmenu*/
#nav {
    background:#009999;
}
#nav ul {
    margin:0;
    padding:0;
}
#nav li {
    list-style:none;
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
    margin:0;
    padding:0;
}
#nav li a {
    display:block;
    text-decoration:none;
    color:#111;
    padding:1em;
}
#nav li a:hover {
    color:white;
    background:#006666;
}
.show-menu {
    background: #66cc99;
    text-decoration: none;
    color: #fff;
    text-align: right;
    padding: 10px 5px;
    display: none;
}
.show-menu b{
    font-size:30px;
}
.show-menu span{
    margin-right: 1em;
    float:left;
    padding: 5px 5px;
}
#nav input[type=checkbox]{
    display: none;
}
#nav input[type=checkbox]:checked ~ #menus {
    display: block;
}
/*css-styles-responsive*/
@media screen and (max-width:768px){
    #nav ul {
        position: static;
        display: none;
        }
    #nav li {
        border-bottom: 0px dotted #111;
        }
    #nav ul li, #nav li a {
        width: 96%;
        }
    #nav li a{
        display:block;
        height:auto;line-height:normal;
        }
    #nav li a {
        text-align:left;
        }
    .show-menu {
        display:block!important;
        line-height:30px;
        }
    .show-menu:hover {
        cursor:pointer;
        }
    label {
        margin:0!important;
        }
}
</style>

Kemudian langkah yang kedua yaitu cari kode </header> bila sudah ketemu maka kita masukkan kode berikut ini di bawah </header> tersebut :

<nav id='nav'>
<label class='show-menu' for='show-menu'><b>&#9776;</b> <span>MENU</span></label>
<input autocomplete='off' id='show-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Archive</a></li>
<li><a href='#'>Comments</a></li>
</ul>
</nav>

Untuk kode di atas bisa kita ganti sesuai dengan keinginan kita, seperti dengan warna bisa diganti sesuai keinginan. Untuk kode warna ditandai dengan tanda pagar misalnya #009999 bisa diganti dengan #f8f8f8, dan seterusnya. Begitu juga dengan nama menunya seperti Home diganti dengan Beranda dan sebagainya. Untuk membuat link tujuan cukup gantikan tanda # yang ada pada <a href='#'> dengan url halaman blog kita.

Dengan melakukan langkah - langkah di atas maka menu navigasi responsive sederhana sudah jadi, dan tinggal cek pada halaman blog kita. Demikian sedikit tutorial mengenai cara membuat menu navigasi responsive yang sederhana.