Cara Mudah Membuat Menu Navigasi Beserta Kotak Pencarian Di Blog

untuk sebagian blogger yang sudah menggunakan template dari situs penyedia template biasanya sudah dilengkapi navigasi menu dengan kotak pencariannya. Namun bagaimana jika yang masih menggunakan menu navigasi masih standar dan ingin di buat sejajar dengan kotak pencarian atau search form, ini dia yang akan saya pada tutorial ini. Untuk membuat navigasi menu horisontal supaya sejajar dengan form search atau kotak pencarian tidaklah terlalu sulit. Form search dapat kita custom sedemikian rupa agar tidak perlu lagi menambahkan default widget kotak pencarian blogger yang masih sederhana. Tampilan atau warna menu nevigasi ini seperti yang terlihat pada gambar di atas, sedangkan efeknya sama seperti pada navigasi yang saya gunakan pada blog ini. Untuk lebih detailnya berikut tutorial untuk Membuat Menu Navigasi With Form Search di Blog.



Ikuti Langkah-Langkahnya :

• Login ke blog
• Buka Template > Edit HTML
• Cari kode ]]><b:skin>
• Copy Script di bawah ini, dan paste tepat di atas kode ]]><b:skin>

#panelnav { background: darkgreen; width: 100%; position: relative; height:37px; margin: auto; z-index:999; } #navmenu,#navmenu ul { list-style:none; margin:0; padding:0; } #navmenu { position:relative; width:auto; background-color:darkgreen; } #navmenu ul { height:0; left:0; overflow:hidden; position:absolute; top:37px; } #navmenu li { float:left; position:relative; } #navmenu li a { background-color:darkgreen; border-right:1px solid green; color:#fff; display:block; font:bold 14px Arial; line-height:27px; padding:5px 20px; text-decoration:none; transition:0.5s; } #navmenu li:hover > a { background:#222; } #navmenu li:hover ul.submenu { height:auto; width:200px; } #navmenu ul li { opacity:0; transition:0.5s; width:100%; } #navmenu li ul li { transition-delay:0s; } #navmenu li:hover ul li { opacity:1; transition-delay:0.5s; } #navmenu ul li a { background:#222; border-top:1px solid #333; border-bottom:1px solid #111; color:#fff; line-height:1px; transition:1.5s; } #navmenu li:hover ul li a { line-height:25px; } #navmenu ul li a:hover { background:darkgreen; } #searchform {float:right; height: 30px; margin:3px} #searchform input.field {background-position:right; background-repeat:no-repeat; width: 200px; padding:7px; outline: none; font: 13px Georgia; font-style: italic; border: none; z-index: 1; height:16px; float:left; padding-right:30px;} #searchform input.field {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8Kipt9wmtoo3Fh8XPSZcRIO-gRNvbN5IuqNwKHxVQfQPF1hPKpSzziX3c-LD9T5L8t-94CRSraYTiFc8IAX_ksrfEhCcFB6k3DHL31hyCRRZM0RXx-42A7vZAc-7cBeeHofAfO74GdJK/s30/search_icon.png); background-color:#222; color: #fff;} #searchform input.field:focus {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8Kipt9wmtoo3Fh8XPSZcRIO-gRNvbN5IuqNwKHxVQfQPF1hPKpSzziX3c-LD9T5L8t-94CRSraYTiFc8IAX_ksrfEhCcFB6k3DHL31hyCRRZM0RXx-42A7vZAc-7cBeeHofAfO74GdJK/s30/search_icon.png); background-color:#333; background-position:right; background-repeat:no-repeat;} #searchform input.submit {background-color:#52e052; color:#000; width:70px; height:30px; float:left; border:none; font: 13px Arial; font-weight:bold; cursor:pointer; margin:0 0 0 1px;} Read more: http://mas-andes.blogspot.com/2013/09/membuat-menu-navigasi-with-form-search.html#ixzz2h5Hfysqi

• Kemudian Simpan Template
• Buka Tata Letak > Tambah Gadget
• Salin Kode di bawah ini

<div id='panelnav'>
    <ul id='navmenu'>
        <li><a expr:href='http://fadhel-kiayi.blogspot.com'>Home</a></li>
        <li><a href='http://fadhel-kiayi.blogspot.com'>Menu 1</a>
        </li>
        <li><a href='http://fadhel-kiayi.blogspot.com'>Menu 2</a>
        </li>
        <li><a href='http://fadhel-kiayi.blogspot.com'>Menu 3</a>
        </li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li>
    </ul>
 <form action='/search' id='searchform' method='get'>
 <div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter keywords..&apos;;}' onfocus='if (this.value == &apos;Enter keywords..&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter keywords..'/>
 <input class='submit' name='submit' type='submit' value='Search'/></div>
 </form>
</div>

Ket :
Kode Warna MERAH ganti dengan URL Blog sobat
Kode Warna BIRU ganti dengan URL yang sobat akan letakkan di Menu Navigasi
Kode Warna KUNING ganti dengan judul yang akan muncul di menu navigasi

• Klik Simpan dan lihat hasilnya

NB : Jika mengalami masalah saat mencobanya, tolong ditanykan dengan sopan di komentar. Sekian ..

Sekian Untuk Artikel Ini ..
Terima Kasih Sudah Berkunjung Di Blog Ini
Mudah-Mudahan Bermanfaat ^_^

SALAM ADMIN ( ..:;[ TIPS DAN TUTORIAL ];:.. )