Cara membuat menu navigasi blog plus kotak pencarian responsif

Ini kali kedua kami memberikan cara membuat navigasi diatas header blog plus dengan kotak pencarian responsive. Navigasi menu kali ini tentu saja dapat diterapkan dengan mudah pada template bawaan blogger yang telah di modifikasi menjadi responsive. Salah satu triknya adalah mengurangi menu horisontal pada bar navigasi dan memperbanyak menu dropdownnya. Cara ini terbukti efektif membuat navigasi menu tampil ciamik pada layar hape yang paling kecil sekalipun! Tidak perlu menambahkan elemen JavaScript, cukup menggunakan 2 elemen: HTML dan CSS.

Seperti biasa anda tinggal membuka pengaturan blog:

1. Masuk ke pengaturan
2. pilih tema atau theme
3. pilih editHTML

LANGKAH PERTAMA: TAMBAHKAN KODE CSS.

Pada halaman HTML cari kode: ]]></b:skin> letakan kode CSS dibawah ini di atasnya:

#contact-links{text-shadow:0 -1px 0 rgba(0,0,0,0.3);margin:auto;position:relative;width:100%}#contact-links a{color:#4C9FEB}#contact-links a:hover{color:#3D85C6}#my-links{float:right;font-size:12px;margin:4px 10px;overflow:hidden;text-shadow:0 1px 0 #FFF}#my-links a{margin-left:7px;padding-left:8px;text-decoration:none}#my-links a:first-child{border-width:0}#menu-container{background:-webkit-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent;background:linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6',endColorstr='#e9eaea',GradientType=0);border-radius:0 0 4px 4px;border:1px solid rgba(0,0,0,0.1);box-shadow:-1px 1px 0 rgba(255,255,255,0.8) inset;clear:both;height:46px;padding-top:1px}#neat-menu{float:left}#neat-menu a{text-decoration:none}#neat-menu ul{list-style:none;margin:0;padding:0}#neat-menu > ul > li{float:left;padding-bottom:12px}#neat-menu ul li a{box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset,1px 0 0 rgba(255,255,255,0.8) inset;border-color:#D1D1D1;border-image:none;border-style:solid;border-width:0 1px 0 0;color:#333;display:block;font-size:14px;height:25px;line-height:25px;padding:11px 15px 10px;text-shadow:0 1px 0 #FFF}#neat-menu ul li a:hover{background:-webkit-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent;background:linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef',endColorstr='#e9eaea',GradientType=0)}#neat-menu > ul > li.active > a{background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0);border-bottom:1px solid #2D81CC;border-top:1px solid #4791D6;box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset;color:#FFF;margin:-1px 0 -1px -1px;text-shadow:0 -1px 0 rgba(0,0,0,0.3)}#neat-menu > ul > li.active > a:hover{background:-webkit-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent;background:linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#499FEE',endColorstr='#3F96E5',GradientType=0)}#neat-menu > ul > li:first-child > a{border-radius:0 0 0 5px}#neat-menu ul ul{background:-webkit-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent;background:-moz-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent;background:linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7',endColorstr='#F4F4F4',GradientType=0);border-radius:5px 5px 5px 5px;border:1px solid rgba(0,0,0,0.1);box-shadow:0 1px 0 #FFF inset;height:0;margin-top:1px;opacity:0;overflow:hidden;width:240px;padding:0;position:absolute;visibility:hidden;z-index:1;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}#neat-menu ul li:hover ul{margin-top:0\2;height:auto;opacity:1;visibility:visible}#neat-menu ul ul a{border-right-width:0;border-top:1px solid #D1D1D1;box-shadow:0 1px 0 #FFF inset;color:#444;height:24px;line-height:24px;padding:7px 12px;text-shadow:0 1px 0 #FFF}#neat-menu ul ul a:hover{background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0);border-top:1px solid #4791D6;box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset;color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.3)}#neat-menu ul ul li:first-child a{border-top-width:0}#menu-search{margin:8px 10px 0 0;float:right}#menu-search form{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBxcNkVk0LXT_3iSo-XxTzzQtMz5ewg9g87Is7b1jGphqO7Vc2rdSSuBhh777n44kaJGAowOx5s_luSdlZPybyqXnXBGfZfTrR-YFu31OO_4xr5LVVC1bua551enuv8msEwKz_3Gsk1bzT/s1600/menu-search.gif) no-repeat scroll 5% 50% transparent;border:1px solid #CCC;border-radius:3px 3px 3px 3px;box-shadow:0 1px 0 rgba(0,0,0,0.05) inset,0 1px 0 #FFF;height:26px;padding:0 25px;position:relative;width:130px}#menu-search form:hover{background-color:#F9F9F9}#menu-search form input{color:#999;font-size:13px;height:26px;text-shadow:0 1px 0 #FFF;background:none repeat scroll 0 0 transparent;border:medium none;float:left;outline:medium none;padding:0;width:100%}#menu-search form input.placeholder,#menu-search form input:-moz-placeholder{color:#

LANGKAH KEDUA TAMBAHKAN HTML

Masih sama dengan cara diatas pada halaman HTMl cari kode </header> lalu letakan kode HTML dibawah ini diatasnya:

<div id='contact-links'>
<div id='my-links'>
<a href='#'>About</a>
<a href='#'>Contact</a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDkcd7CMiecOw2PMaRgx33APUwWne-oSrdtJUtU6fhYlxLSqOw4WLHoP3vJh-o-A3526x8jj2RWcQgEOO0vFv-GwN_1fpoU8spC4KhZ-hWcSMoplwJGT4CZeCgtSJcCtzmS5jpbKZIz8Y/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGmuOyIAkkZ8ENZnOI25KIfwxvo-QM5RDLuhJZuE9NPsjizZ7-pyoo3XsJWOVS5ZyznwgjuG_zzQJx4Y_-_YbwYo99cwI48zvovvfUYm5-bxQ-1d27ay3UIniEY1JrQTjq_Zz5ssqZQpM/s1600/twitter.png' title='Twitter' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNHoEceci8LnhnWu8LLCIcs_q-EHV4jg6DrT4zRhnRNUpCor9TBjuh0WLjuRltJkO9r844iUc0jHegOLYB-ZQjEVZCKogW1NxxbSdQzk-pBk-pD0I6XyxBQHsGHvkPujkdqejj1QQ0CPIh/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXyAh-9K7oG0015Vjmvpimp32dLHQYGaL_hy2KhYvTJ7KUkK-4-2beHHmsZwg28ZJsyIdAOf_YvSQiTNYEt5SF09piBsjbQGuLe3DSuU5Gf4_xOxC0MNdjqvP5sH8ieQCQPmD3JxGPxekP/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
</div>


<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'>Beranda</a></li>
<li><a href='#'>Blogger</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>Desain</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>

</li>
</ul>
</nav>
<!-- menu-search form -->
<div id='menu-search'>
<form action='/search' method='get'>
<input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
</form>
</div>
</div>
</div>

Lalu SAVE tema anda.

Lihat DEMO 

Atau lihat demo video:

Penjelasan: 

• Semua Nama menu yang berwanra merah dapat anda ganti dengan nama menu yang anda buat sendiri
• Smua tanda tagar '#' warna hijau dapat anda ganti dengan link atau URL anda sendiri.

Selamat ngeblog!