Ini Solusinya Cara Membuat Menu Search Sederhana Pada Blogger

 

Hallo sahabat webmuna dimanapun anda berada, pada kesempatan kali saya akan membahas sebuah tutorial tentang bagaimana membuat menu search box sederhana pada blogger.

Pada postingan sebelumnya saya juga telah membahas tentang bagaimana cara membuat menu search box show hide pada blog.

Lihat juga :
Cara membuat menu search box show hide pada blogger.

Baiklah sekarang kita langsung saja ketutorial bagaimana membuat menu search box sederhana seperti pada contoh gambar di atas.

CARA MEMBUAT MENU SEARCH BOX SEDERHANA PADA BLOG

1. Untuk langkah pertama seperti biasa login kedalam blogger selanjutnya pilih Tema - Edit HTML.

2. Cari kode ]]></b:skin> selanjutnya copy kode CSS di bawah ini kemudian Paste atau letakkan tepat di atas kode ]]></b:skin>.

#muna-search-btn {
    background: none repeat scroll 0 0 #359BED;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#muna-search-box {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 none;
    padding: 10px;
    width: 160px;
}
.jakmita{
float: right;
height: 50px;
} 

3. Selanjutnya meletakkan kode HTML menu search box. Biasanya menu search box berada pada bagian sebelah kanan menu navigasi atau sobat bisa juga meletakkan di tempat lain.

4. Copy kode HTML menu search box dibawah ini kemudian letakkan dimana sobat ingin menampilkan menu search box pada blog.

<div class='jakmita'>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='muna-search-box' name='q' placeholder='Search' type='text' value=''/>
<button id='muna-search-btn' title='' type='submit'><span class='fa fa-search'/></button>
</form>
</div> 

5. Klik menu SIMPAN dan lihat hasilnya.

Demikianlah sedikit penjelasan dari saya tentang bagaimana membuat menu search box sederhana pada blogger.

Semoga artikel ini dapat membantu dan bermanfaat.

Selamat mencoba...