Halo sobat Blogger , saya akan Share sesuai Request sobat Wirang Geni yaitu Menu Navigasi dengan tambahan  Custom Search Engine. Custom Search Engine adalah Fitur Pencarian yang di sediakan oleh Google, kegunaan dari CSE adalah pencarian kata kunci yang akurat seperti Pencarian Google. Untuk mencobanya sobat bisa coba di Kotak Pencarian saya di kanan atas. Menu Navigasi ini saya tiru dan modifikasi dari Blog www.pradiszwardhana.com , tentu saja saya sudah ijin terlebih dahulu pada empunya. Untuk contoh sobat bisa lihat di atas atau pada gambar di bawah ini :

Berikut langkah-langkahnya :

• Tambahkan kode ini di  atas ]]></b:skin>

/* Navigasi */

#nav {background: #777777;height:35px;border-radius:2px 2px; -moz-border-radius:2px 2px 2px 2px;  -khtml-border-radius:2px 2px 2px 2px;  -webkit-border-radius:2px 2px 2px 2px;  border-radius:2px 2px 2px 2px;padding-bottom: 2px;}

#nav-left {float:left;display:inline;width:500px;}

#nav-right {float:right;display:inline;width:225px;padding:5px 5px 0px 0px;}

#nav ul {position:relative;overflow:hidden;padding:0px 0px 0px 5px;margin:0;text-transform: uppercase;font-size:11px;font-weight:bold;}

#nav ul li {float:left;list-style:none}

#nav ul li a, #nav ul li a:visited {display:block;color:#ffffff;margin:4px 4px;padding:7px 7px 7px 7px;text-decoration:none;}

#nav ul li a:hover {background-color: #eeeeee;color: #000000;display:block;margin:4px 4px;padding:7px 7px 7px 7px;border-radius:2px 2px; -moz-border-radius:2px 2px 2px 2px;  -khtml-border-radius:2px 2px 2px 2px;  -webkit-border-radius:2px 2px 2px 2px;  border-radius:2px 2px 2px 2px;}

#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{background-color:#fff;color:#ffffff;margin:4px 4px;padding:7px 7px 7px 7px;border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px;}

#searchbox {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv-OVG0Mk5e-kV_gDaYWyEyzyJWX5kS5IgUjbZkxDv-qIC027wa_G9eekDgEOSGwT_fxtJeeflT5XJIUKQiW4G15MfywFd-olHqH-1QmNBJRrs-KLQGu6PS7KTWX-p3d1trJKj_YVWVmgm/) no-repeat;width: 225px !important;height: 25px;}

#searchbox #s {float:left;padding:2px;margin: 2px 0px 0 5px;border:0;width:185px;background:none;font:13px Verdana;color:#3b3b3b;}

#nav-sub {background: #d9d9d9;height:30px;border-radius:2px 2px; -moz-border-radius:2px 2px 2px 2px;  -khtml-border-radius:2px 2px 2px 2px;  -webkit-border-radius:2px 2px 2px 2px;  border-radius:2px 2px 2px 2px;}

#nav-sub ul {position:relative;overflow:hidden;padding:0px 0px 0px 5px;margin:0;text-transform: uppercase;font-size:11px;font-weight:bold;color:#333;}

#nav-sub ul li {float:left;list-style:none;color:#333;margin-left:2px;margin-right:2px;margin-top:4px;margin-bottom:2px;padding-left:7px;padding-right:7px;padding-top:4px;padding-bottom:2px;}

#nav-sub ul li a, #nav-sub ul li a:visited {color:#333;text-decoration:none;}

#nav-sub ul li a:hover {color: #296DC0;text-decoration:underline;}

• Letakkan kode ini di bawah <div id='content-wrapper'> atau di atas <div id='main-wrapper'>

<div id='nav'>

<div id='nav-left'>

<ul id='nav'>

<li><a href='http://mbahqopet.blogspot.com/'><img alt='Home' src='https://lh3.googleusercontent.com/-OaZjfFWc8JM/Tlikdfihj1I/AAAAAAAABPs/O-U3vZ_Pb_A/home%252520icon.png' title='Home'/></a></li>

<li><a href='URL KAMU' title='Judul'>Menu</a></li>

<li><a href='URL KAMU' title='Judul'>Menu</a></li>

<li><a href='URL KAMU' title='Judul'>Menu</a></li>

</ul>

</div>

<div id='nav-right'>

<form action='http://www.google.com/cse' id='searchform' method='get' style='display:inline;' target='_blank'>

<div id='searchbox'>

<input name='cx' type='hidden' value='003061775351897953705:noluujpjl7o'/>

<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Google Custom...'/>

<input alt='Search' id='searchsubmit' src='https://lh5.googleusercontent.com/-vjS8Nog62iw/TgSg2k7iYEI/AAAAAAAAAt8/nnu2Xd0ZHl0/search_button.gif' style='margin: 2px 0px 0px 3px;' title='Cari Artikel Disini' type='image'/>

</div>

</form>

</div>

</div>

• Ganti kode berwarna merah dengan ID CSE kamu.
• Jika di blog kamu sudah terdapat Menu Navigasinya hapus terlebih dahulu.
• Pratinjau terlebih dahulu untuk menghindari kesalahan.
• Simpan dan lihat hasilnya

Jika ada pertanyaan dari sobat blogger silahkan tinggalkan pada kotak komentar di bawah ini.