Cara Membuat Menu Blog dengan Search Engine pada Blog

Sobat SOBER - Menu merupakan hal penting dalam web ataupun blog pada umumnya template blog yang sekarang ini sudah banyak yang menyediakan menu dengan search di sampingnya, tapi bagaimana jika tidak ada?.... nah ini jawabannya untuk yang kesulitan dalam membuat menu dengan search engine pada blog.

 

Langkah 1 : Buka Blog terlebih dahulu (jangan buka yang macam-macam gan)

Langkah 2 : Pilih Template --> Edit HTML --> Find kemudian cari <header id='header-wrapper'> atau <header , letakkan kode dibawah ini tepat diatas kode tadi :

<div id='nav-wrap'>
<nav class='menu'>
<!-- seo-toblog.blogspot.com top menu start -->
<ul class='nav-menu'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
<!-- seo-toblog.blogspot.com top menu end -->
<!-- search form start -->
<ul class='nav-search'>
<form action='/search' method='get'>
<input class='navsearch' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...'/>
<button class='subsearch' type='submit'><i class='fa fa-search'></i></button>
</form>
</ul>
<!-- search form end -->
</nav>
<div class='clear'></div>
</div>

Kemudian pasang CSS untuk memperindah dan mempercantik menu diatas, letakkan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style> 

/* SEO-TOBLOG TOP MENU */
.menu {
font:normal normal 13px Open Sans Condensed, Arial, sans-serif;
padding:0 0;
background:#ffffff;
margin:0 auto;
height:38px;
border:1px solid #f0f0f0;
overflow:hidden;
text-transform:uppercase;
}
.nav-menu {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
.nav-menu li {
display:block;
float:left;
line-height:38px;
margin:0 0 0 0;
padding:0 0 0 0;
border-right:1px solid #f0f0f0;
}
.nav-menu li a {
background:#ffffff;
color:#8D8D8D;
display:block;
padding:0 8px;
}
.nav-menu li a:hover {
background:#f5f5f5;
}
ul.nav-search {
height:38px;
margin:0 0 0 0;
padding:0 0;
float:right;
}
.navsearch {
padding: 10px;
border-left: 1px solid #ddd;
color: #666;
border-top:1px solid #fff;border-bottom:1px solid #fff;border-right:1px solid #ddd;
transition:all 0.5s ease-out;
font:normal normal 14px Open Sans Condensed, Arial, sans-serif;
float:left;
}
.navsearch:focus {
background:#fafafa;
}
.subsearch {padding:10px;color:#555;font:normal normal 14px Open Sans Condensed, Arial, sans-serif;border:none;background:#fff;cursor:pointer;}
.subsearch:hover {background:#fafafa}

Kemudian Simpan Template dan Lihat hasilnya.