Cara Ampuh Membuat Menu Navigasi Responsive Untuk Jadi Blog Profesional

Contoh gambar menu navigasi responsive

 Menu navigasi merupakan salah satu fasilitas yang harus ada di dalam sebuah blog. Menu navigasi memiliki bermacam - macam bentuk, diantaranya ada yang berbentuk horizontal dan vertikal.

Di dalam menu navigasi biasanya terdapat link seperti :

• Home
• About
• Contact
• Privacy Policy
• Sitemap
• Dan lain - lain

Fungsi dari menu navigasi adalah sebagai pemandu pengunjung blog anda agar dapat lebih mudah dalam menentukan kategori yang pengunjung inginkan tanpa harus bersusah - susah untuk mencari.

Sedangkan manfaat dari menu navigasi yaitu :

1. Mudah mendapatkan backlink
2. Dinilai sebagai blog profesional
3. Mendapatkan nilai tambah dari Google karena memanjangkan pengunjung blog

Para master blog juga menyarankan untuk memasang menu navigasi pada setiap blog yang anda miliki.

Karena dilihat dari fungsi dan manfaatnya, Saya ingin membagikan cara membuat menu navigasi responsive 100% di blog.

1. Login ke blogger
2. Klik " Template "
3. Kemudian klik " Edit Template "
4. Cari kode ]]></b:skin> atau </style>. Gunakn Ctrl + F agar lebih mudah
5. Kemudian copy kode dibawah dan letakkan di atas kode ]]></b:skin> atau </style>

#menu{background:#464646;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#fff}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;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:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#464646;position:absolute;z-index:99;display:none;border:1px solid #;border-top:none;color:#333}
#menu ul.menus a{color:#fff}
#menu ul.menus li{display:block;width:100%;font:bold 13px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#464646;color:#fff}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#464646;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px} 

@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#464646;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#fff}
#menu li:hover{background:#464646;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#464646;color:#fff;}
#menu ul.menus a{background:#464646;}
#menu ul.menus a:hover{background:#464646;}
#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. Selanjutnya cari kode </header> dan letakkan kode dibawah tempat dibawah kode </header>

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a class='prett' href='#' title='Drop Menu'>Drop Menu</a>
<ul class='menus'>
<li><a href='#' title='Drop Menu1'>Drop Menu1</a></li>
<li><a href='#' title='Drop Menu2'>Drop Menu2</a></li>
<li><a href='#' title='Drop Menu3'>Drop Menu3</a></li>
</ul>
</li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a class='prett' href='#' title='Drop Menu1'>Drop Menu1</a>
<ul class='menus'>
<li><a href='#' title='Drop Menu1'>Drop Menu1</a></li>
<li><a href='#' title='Drop Menu2'>Drop Menu2</a></li>
<li><a href='#' title='Drop Menu3'>Drop Menu3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>

Keterangan :

• Silahkan ganti tanda # dengan link tujuan anda
• Ganti juga daftar menu navigasi sesuai keingin anda

Copyright : http://panduanblogdanseo.blogspot.com/