Membuat search engin pada navbar blog

Sebelumnya saya menulis tentang cara membuat search engin pada blog, tapi bagaimana jika kamu pengen search engin itu berada pada navbar blog yang sejajar lurus dengan menu navigasi,karena tampak lebih indah juga maka kemarin aq membuat sendiri search engin pada blog ini di navbar sejajar menu navigasi, lht hasilnya dah pas belum...kalo kamu pengen juga membuatnya,mungkin kamu bisa mencobanya juga.





Langkah pertama:

• Log in dulu ke blogger
• klik Tata letak
• Edit HTML
• jangan lupa download dulu tamplate asli anda untuk mencegah hal-hal tak diinginkan
• cari kode ]]></b:skin>
  
• letak kan kode dibawah ini di atas kode ]]></b:skin>

---

---

/* search
===================== */
#search{width:210px;font-size:11px;float:right;margin:0;padding:0}
#searchform{overflow:hidden;display:inline;margin:0;padding:0}
#searchbox{background:#ddd;margin:0;padding:0}
#search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}
#search .btn{width:auto;border:0;margin:7px 0 0;padding:0}

---

---

Kalau sudah ketemu kamu coba cari kode yang mirip seperti ini:

<div id='NavbarMenu'>

atau kalau gak ketemu juga kamu coba kode yang ini:

<div id='navigation'>

kalau sudah ketemu maka kode yang berwarna merah tersebut akan diakhiri dengan kode </div> letakkan kode dibawah ini tepat dibawah kode </div> tersebut:

---

---

<div id='search'>
<form action='http://infonetmu.blogspot.com/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='160' 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='Search...'/>
<input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipn7nPa8Dh7kiCAG0uSVy-RVynHikKD4TeUtouc7E6NxoTULegx-86kOQMk8Hpy7XrJMxjyS-oYPLAVbjHgSAnFrZ-6jiC10fF28PUnryKIZUvd49W9MwGKcyPIwt0O5whQInBNCNEehkG/s1600/1zehw2f_th.jpg.png' type='image' value='Go'/>
</form>
</div>

---

---

lihat hasilnya,akan ada search engin pada navbar anda, selamat mencoba aja ya...



BACA JUGA!
- Cara membuat kotak banner
- Cara Memasang search engin pada blog
- Membuat background pada relate post/artikel terkait
- Cara membuat text area dengan background warna dan gambar
- Membuat footer tiga kolom di bawah posting
- Cara memasang sitemeter pada blog
- Memasang tombol share twitter dan facebook pada setiap postingan
- Meta tag title blog yang ramah SEO
- Membuat efek turun salju pada blog
- Menambah elemen dibawah postingan
- Menampilkan kode html dalam postingan blog