Cara Membuat Menu Navigasi Keren dan Responsive di Blog

Cara Membuat Menu Navigasi Keren dan Responsive di Blog - Menu Navigasi merupakan sebuah menu bar yang berisi tautan menuju link tertentu yang berguna untuk menggolongkan artikel tertentu supaya lebih mudah dalam mengaksesnya.

Menu navigasi biasanya terdiri dari beberapa tab dan terletak dibawah header blog. Di dalam masing-masing tab tersebut berisi link yang menuju postingan, label, halaman statis, atau blog/situs lain. Dengan menu navigasi responsive membuat blog terlihat lebih teratur dan dapat memudahkan pengunjung untuk mencari apa yang mereka inginkan.

Baca juga vroh : Cara Membuat Komentar Blog Keren dengan Thread Comment Hack

Bagi sobat yang sudah mengerti dan paham tentang css dan html, membuat menu navigasi & search form bukanlah hal yang sulit. Tapi disini saya ingin berbagi pengalaman bagaimana cara membuat menu navigasi & search form keren dan responsive di blog. Berikut cara-caranya :

1. Masuk Dashbord => Template => Edit HTML.
2. Simpan kode css berikut di atas </style> atau ]]></b:skin> :

   /* MENU NAVIGATION AND SEARCH
   ==================================================== */
   .masmenu{background:#2c8fc9; color:#fff;display:inline-block;width:100%;}
   .masmenu ul{width:100%;padding:0;margin:0 auto}
   .masmenu li:first-child a{padding:7px 10px 3px}
   .masmenu li{list-style:none;display:inline-block;float:left}
   .masmenu li a{;color:#fff;display:block;font:bold 13px Arial;position:relative;text-decoration:none;padding:10px}
   .masmenu li a:hover{background:#2374a3; color:#fff}
   .masmenu li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}
   .masmenu li li a,.masmenu li li a:link,.masmenu li li a:visited{background:#2c8fc9;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;text-shadow: none;opacity:0.8}
   .masmenu li li a:hover,.masmenu li li a:active{background:#2374a3}
   .masmenu li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}
   .masmenu li ul a{width:140px}
   .masmenu li ul ul{margin:-33px 0 0 157px}
   .masmenu li:hover>ul,.masmenu li.sfHover ul{left:auto}
   .menusearch{width:300px;float:right;margin:0 auto;padding:5px 10px 0 0}
   .searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:300px;height:23px; overflow:hidden;border-radius:3px;border:1px solid #5c820d;}
   .searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}
   .searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 260px;height:23px;border:0px;outline: none;line-height:23px;}
   .searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}

3. Selanjutnya panggil kode css yang sudah dipasang tadi, dengan cara pasang kode berikut tepat dibawah </header> :

   <div class='masmenu'>
   <ul class='sf-menu'>
   <li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKR5W0SDhbZtPM28R9ihJ0L2zgn2deNxpSG7KyQthVA0Pe918cNILsSyz1RMyyT9r2scIm1XbOL56l1mrmgBBiOqAKCfFjxAzc4s5_JebP7Zj36ATq8OASA-XWQFCYliZ7LZbpSX-zYc/s1600/home.gif' style='padding:0px;'/></a></li>
   <li><a href='#'>Menu 1</a></li>
   <li><a href='#'>Sub Menu 1</a>
   <ul>
   <li><a href='#'>Sub 1</a></li>
   <li><a href='#'>Sub 2</a></li>
   <li><a href='#'>Sub 3</a></li>
   </ul>
   </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>
   </ul>
   <div class='menusearch'>
   <form action='/search' class='searchform' method='get'>
   <input class='searchfield' id='q' 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 here....'/>
   <input class='searchbutton' src='data:image/gif;base64,R0lGODlhGAAYAPdlAKysrPr6+vn5+WJiYvj4+GNjY01NTW1tbXFxcV9fX1RUVFNTU729vf7+/lFRUff394ODg0NDQ2RkZF5eXmxsbLKysr6+vnNzc9PT03BwcN3d3bu7u8PDw1BQULm5udHR0WZmZl1dXefn50VFRevr6/v7+3JycvT09M7OzpKSktfX12VlZfDw8MrKytjY2MzMzP39/eLi4q2trUtLS0pKSpWVlW5ubn19fdbW1r+/v29vb6qqqri4uFdXV1VVVYKCgpSUlN7e3mdnZ35+fkRERNTU1GBgYFhYWJycnLS0tMjIyIWFhfPz8zw8POrq6tzc3HZ2dtLS0vz8/FxcXKurq09PT7a2ttra2sfHx1JSUnV1debm5q6urlZWVoCAgOnp6YGBgU5OTmtra7q6uv///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAGUALAAAAAAYABgAAAjVAMsIHEiwoMGDCBMqXMiwYcMTT1RY0HDC4UAsKS5MkKAlxYcADitQGCDmAIUDBYRYafgBxIoMXHCokHFBwoAoCwVAmJBhC0EXUBKAYaIwyJQCHAxyGKADhUILR1aQMHgFQQEeChl0GcDCoAYTRjwoLJIlBAaDKBKAUKLwAQIDQwgQJPHDAISuWR10WPLii5MWXhxUASKAYY0OEUKYQJCAyILHAB4wpGJDQZMIPQ5USOJjBgC5CgOIGAMAiQcRAhkoGAHAosENCm64NoghxuzbuHPrLhgQADs=' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
   </form>
   </div>
    </div>

4. Jika sudah selesai save, lalu lihat hasilnya.

Untuk membuat membuat menu navigasi dan search form jadi responsive tambahkan kode berikut di media queries :

.masmenu li{float:none;}
.masmenu li a{background:none}.masmenu ul{text-align:center;width:100%}.menusearch{float:none;padding:5px 0 10px}

^^Semoga Berhasil^^