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

Cara Membuat dan Memasang Kotak Pencarian (Widget Search) Pada Blog Part 3 - Disamping Menu (Navigasi) v3.0 with CSS. 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) dengan CSS, 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.
Sebelum melangkah ke tujuan terakhir cari kode ]]></b:skin> kemudian copy paste kode berikut diatasnya.

fieldset.search {
    border: none;
    width: 200px;
    margin: 0 auto;
    background: transparent;
}
.search input, .search button {
    border: none;
    float: left;
}
.search input.box {
    color: #000;
    font-size: 1.2em;
    width: 155px;
    height: 25px;
    padding: 0px 10px 0;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOOqnRLx9TGuBMWPGUhTzLusVThTxmmmsjYdwBmHKUfEV5XWwQ6Y_PgyX8G_OC6l2ubZZsTar93rIdZ8B4Ucflm3I141pTclcOovYe9ei70wFdrb457FEWXfil53jrEbLV5rOJQtMXiTs/s288/3.png') no-repeat;
    margin-right: -10px;
}
.search input.box:focus {
        text-align:left;
        padding-left:10px;
        width: 155px;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOOqnRLx9TGuBMWPGUhTzLusVThTxmmmsjYdwBmHKUfEV5XWwQ6Y_PgyX8G_OC6l2ubZZsTar93rIdZ8B4Ucflm3I141pTclcOovYe9ei70wFdrb457FEWXfil53jrEbLV5rOJQtMXiTs/s288/3.png') no-repeat left 0px;
        outline: none;
}
.search button.btn {
    width: 25px;
    height: 25px;
        cursor: pointer;
    text-indent: -9999px;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6h6t3rpsorwsvr0tc79q2rGN6c5jByR0VPtbK1UO345DN0kH08MSO1N420qMxY3TBDL2HXhZ6bLM7HLdksr_pZtRM9iqKa-O6VLd04UceKtP0mLrYf_gyChxW0v3imiIlxISz3Vtc6R4/s288/1.png') no-repeat top right;
}
.search button.btn:hover {
          background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6h6t3rpsorwsvr0tc79q2rGN6c5jByR0VPtbK1UO345DN0kH08MSO1N420qMxY3TBDL2HXhZ6bLM7HLdksr_pZtRM9iqKa-O6VLd04UceKtP0mLrYf_gyChxW0v3imiIlxISz3Vtc6R4/s288/1.png') no-repeat bottom right;
}



.search input.box {
    background: url(search_bg_ie.gif) no-repeat right bottom; /* Unique Input Box background image specifically for IE, and the background position must be aligned to the right*/
}

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 align='center' id='nav2'>
<form action='http://www.adaartikel.co.cc/search' id='searchform' method='get'>
<fieldset class='search'>
<input class='box' id='b-query' maxlength='255' name='q' type='text' value='Search here...'/>
<button class='btn' title='Ok'>Search</button>
</fieldset>
</form></div>
</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 align='center' id='nav2'>
<form action='http://www.adaartikel.co.cc/search' id='searchform' method='get'>
<fieldset class='search'>
<input class='box' id='b-query' maxlength='255' name='q' type='text' value='Search here...'/>
<button class='btn' title='Ok'>Search</button>
</fieldset>
</form></div>
</div>

Simpan dan lihat hasilnya

Contohnya Seperti berikut:

(atau lihat blog aku)

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 search-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 atau part 2 v2.0

Selamat mencoba saja yah, semoga berhasil....

*****