Membuat Menu Navigasi With Form Search di Blog

Membuat Menu Navigasi With Form Search 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.

1. Login ke blogger.
2. Masuk ke Edit HTML template.
3. Copy kode berikut ini lalu taruh 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/AVvXsEjFmm5MfDBUj04lMP4hZDrg1iOZyy7t27Oe9Yol2s2hm3C_9QrLB_thzHOfr7Y8PVvkA6Q4u3fVJKkLXh38vXUxg3bvQMmhtmlVbwFnEsskMZ-5QOkP6QqKuMOg3XsTDlnJ0l6ufS8nea3o/s30/search_icon.png); 
background-color:#222; color: #fff;}
#searchform input.field:focus {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmm5MfDBUj04lMP4hZDrg1iOZyy7t27Oe9Yol2s2hm3C_9QrLB_thzHOfr7Y8PVvkA6Q4u3fVJKkLXh38vXUxg3bvQMmhtmlVbwFnEsskMZ-5QOkP6QqKuMOg3XsTDlnJ0l6ufS8nea3o/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;}

4. Copy kode berikut ini lalu paste kedalam Widget HTML/Javascript.

<div id='panelnav'>
    <ul id='navmenu'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 1</a>
            <ul class='submenu'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
            </ul>
        </li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 2</a>
            <ul class='submenu'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
            </ul>
        </li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 3</a>
            <ul class='submenu'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
            </ul>
        </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>

Keterangan:
Ganti http://mas-andes.blogspot.com dengan label link blog anda.

5. Langkah terakhir Simpan dan lihat hasilnya.

Demikian tutorial cara Membuat Menu Navigasi With Form Search di Blog, apabila masih terdapat kekurangan silahkan bisa di custom kembali agar lebih menarik dan seperti selera yang di inginkan entah itu warna atau yang lainnya.