Cara Membuat dan Memasang Kotak Pencarian (Widget Search) Pada Blog Part 2

Cara Membuat dan Memasang Kotak Pencarian (Widget Search) Pada Blog Part 2 - Disamping Menu (Navigasi) v2.0. Hari ini aku akan melanjutkan tutorial yang kemarin karena aku rasa belum sempurnah sekarang aku berikan sedikit tutorial tentang tata cara membuat dan memasang widget search (widget kotak pencarian) pada blog tepat disamping kiri Nav (Menu Navigasi), walau ada banyak yang menyediakan fasilitas kotak pencarian (search box) ini, namun menurutku tidak sebagus karya sendiri. Perlu diketahui, sebenarnya blogger sendiri telah menyediakan fasilitas ini yaitu "Pencarian Powered By Google". Widget default ini kurang baik menurut aku karena tidak sesuai selera. Nah bila Anda yang ingin membuat widget kotak pencarian (search box) sendiri pada blog teapat di sampin Nav (Menu Navigasi), ikutilah tutorial berikut ini.

Pertama Login Ke Blogger
Klik (pilih) Rancangan
Klik (pilih) Edit HTML
Download Lengkap Template (disarankan karena bila nanti terjadi kesalahan Anda tinggal meng-uploadnya lagi.
Cari kode berikut default "#nav" kalau tidak ditemukan coba cari yang ini "navigation atau container"
Setelah ketemu, lihat lebar navigasinya misal default-nya

---Nav---
#nav{
width: 1000px;
height:100%;
background-color: #fffff;
display: inline
}
#nav ul {-----} misal bentuknya seperti ini
#nav li {-----} misal bentuknya seperti ini
#nav li a,#nav li a:link,#nav li a:visited {-----} misal bentuknya seperti ini
#nav li a:hover, #nav li a:active {-----} misal bentuknya seperti ini
#nav li li a, #nav li li a:link, #nav li li a:visited {-----} misal bentuknya seperti ini
---End Nav--- (hanya pembatas agar cepat mengetahui batas nav pertama)

(bagi dua kode yang berwarna merah diatas, dimaksudkan agar ada tempat (ruang) untuk widget pencarian-nya nanti.
Perhatikan perubahan dibawah

---Nav---
#nav{
width: 800px;
height: 40px;
background-color: #fffff;
display: inline
}
#nav ul {-----} misal bentuknya seperti ini
#nav li {-----} misal bentuknya seperti ini
#nav li a,#nav li a:link,#nav li a:visited {-----} misal bentuknya seperti ini

#nav li a:hover, #nav li a:active {-----} misal bentuknya seperti ini
#nav li li a, #nav li li a:link, #nav li li a:visited {-----} misal bentuknya seperti ini
---End Nav--- (hanya pembatas agar cepat mengetahui batas nav pertama)

---Nav2---
#nav2{
width: 200px;
height: 40px;
background-color: #fffff;
display: inline
}

Cukup seperti diatas saja.
Cari lagi <div id='nav'> kalau tidak ada ditemukan, coba cari yang ini <div id='navigation'> atau <div id='container'> dan copy paste code dibawah ini tepat dibawahnya.

<div id='nav2'>
<form id="searchthis" action="http://namablogkamu.blogspot.com/search" style="display:inline;" method="get"><input id="b-query" maxlength="255" name="q" value="Cari artikel..." type="text"/><input id="b-searchbtn" value="Cari" type="submit"/></form>
</div>

Perhatikan perubahan berikut

<div id='wrap'>
<div id='nav'>
<ul><li><a href='#' >Link 1</a>
</li><li><a href='#' >Link 2</a>
</li><li><a href='#' >Link 3</a>
</div>

<div id='nav2'>
<form id="searchthis" action="http://namablogkamu.blogspot.com/search" style="display:inline;" method="get"><input id="b-query" maxlength="255" name="q" value="Cari artikel..." type="text"/><input id="b-searchbtn" value="Cari" type="submit"/></form>
</div>

Simpan dan lihat hasilnya

Keterangan:

Ganti kode yang berwarna biru sesuai dengan url blog Anda
Ganti kode yang berwarna merah sesuai keinginan Anda
Tutorial ini 100% berhasil bila template Anda dilengkapi dengan background dengan navigasi sekaligus, kalau pun tidak bisa, kita bisa sih edit sedikit, tetapi kalau dijelaskan lewat postingan pasti agak ribet.
Tutorial ini juga kemungkinan berhasil 50% yaitu hanya sedikit, penempatan widget serch-nya tidak sesuai keinginan kita.
Tutorial ini juga kemungkinan berhasil 10% dan mengakibatkan adanya pergeseran template (tempalte berubah bentuknya)

Atau pasang saja widget pada postingan kemarin di part 1 v1.0
Selamat mencoba saja yah, semoga berhasil....

*****