Tutorial Membuat Menu Navigasi

Pertama:

Silahkan login akun blogger anda, kemudian pilih “Template” Lalu klik “Edit HTML”.

Kedua:

Lalu cari kode ]]></b:skin> atau </style> kemudian letakkan kode berikut tepat diatas kode tadi.

/* Menu Navigasi */

.menunav{max-width:auto;background:#1a7db7; color:#fff;display:inline-block;width:100%;border-bottom: 3px solid #dfdfdf;}

.menunav ul{width:100%;padding:0;margin:0 auto}

.menunav li:first-child a{padding:7px 10px 3px}

.menunav li{list-style:none;display:inline-block;float:left}

.menunav li a{;color:#fff;display:block;font:bold 13px Arial;position:relative;text-decoration:none;padding:10px}

.menunav li a:hover{background:#2374a3; color:#fff}

.menunav li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}

.menunav li li a,.menunav li li a:link,.menunav 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}

.menunav li li a:hover,.menunav li li a:active{background:#2374a3}

.menunav li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}

.menunav li ul a{width:140px}

.menunav li ul ul{margin:-33px 0 0 157px}

.menunav li:hover>ul,.menunav li.sfHover ul{left:auto}

.menusearch{width: 210px;;float:right;margin:0 auto;padding: 13px 0 0;}

.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;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: 160px;height:23px;border:0px;outline: none;line-height:23px;}

.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0} none;line-height:23px;}

.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}

Ketiga:

Lalu pasang kode menu navigasi berikut tepat dibawah </header>

<div class='menunav'>

<ul class='sf-menu'>

<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLUGLaQ1WbeHNHFIujqsTTiGc4BSfB9C6cFJL_w6BDzZoTxUHTBLEImqrcB9gF39cs4L6M9HquXjZve3Qlqfpw2-9voqYE64wmlTIV5b1mxQrrYYzXrwdE7G9QYHhGH8Z48uCyB-dcleY/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>

Selanjutnya pasang kode responsive pada media queries berikut ini tepat diatas kode ]]></b:skin> atau </style>:

@media only screen and (max-width:768px){

.menunav li{float:none;}

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

}

Terakhir, Klik Save/Simpan dan lihat hasilnya.

link:https://penaindigo.com/cara-membuat-menu-navigasi-responsive/