Cara Menambahkan Kotak Search di Template Super SEO Ala Blacknod

Beberapa waktu yang lalu saya sempat share template Super SEO Ala Blacknod, sebuah template yang custome dari karya Kang Ismet dengan nama template Super SEO, kali ini saya akan coba membahas tentang penambahan fitur search pada template Super SEO Ala Blacknod.

Bagaiamana cara menambahkan kotak search pada template Super SEO Ala Blacknod?.
Tentang cara penambahan kotak search pada template Super SEO Ala Blacknod ini, kotak search akan saya letakkan pada bagian kolom menu, yang nantinya kotak tersebut sejajar dengan kolom menu akan tetapi posisinya adalah berada di sebelah paling kanan.

Untuk tutorial selengkapnya, silahkan perhatikan langkah-langkah di bawah ini :

1. Silahkan anda login terlebih dahulu ke akun blogger anda.
2. Pilih Template dan kemudian klik Edit HTML.
3. Pastikan bahwa template yang anda gunakan adalah template Super SEO Ala Blacknod.
4. Pada halama Edit HTML, format sekarang sudah tampak layaknya text editor, maka silahkan cari kode di bawah ini dengan cara klik pada script template anda dan cari dengan menekan CTRL+F :
/* Search */

5. Jika ketemu, silahkan ganti script di antara atribut di atas dan sebelum /* Top Menu */ dengan script CSS di bawah ini :

#search{float:right;margin:3px 2px 0 0;}
.search form{float:right;margin-right:0;}
.search input{float:left;background:url(http://i276.photobucket.com/albums/kk1/sandi2002/Tricks%20Theme/search-input.png) no-repeat;border:none;padding:8px 0 7px 18px;width:182px;color:#000066;font-weight:bold;}
.search button{float:left;background:url(http://i276.photobucket.com/albums/kk1/sandi2002/Tricks%20Theme/search-button.png) no-repeat;width:44px;height:29px;border:none;cursor:pointer;color:#fff;vertical-align:middle;padding:2px 5px 5px 0;font:bold 12px/12px "Verdana", sans-serif;}
#ajax-search-form{position:relative;font:normal normal 13px Arial,Sans-Serif}
#ajax-search-form a{color:#181818;text-decoration:none}
#ajax-search-form input{border:1px solid #CCC;background-color:white;color:#6F6F6F;margin:0;padding:10px 6px 9px;font-size:9px;border-top-color:#999;width:160px}

Maka tampilan akan seperti gambar di bawah ini :

6. Selanjutnya anda cari kode berikut "<div class='clear'/></div><!-- /#navbarsecond -->"

7. Letakkan kode di bawah ini tepat sebelum kode di atas :

<div id='search'>
<form action='/search' id='ajax-search-form'>
<input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;To search type and hit enter...&quot;;}' onfocus='if (this.value == &quot;To search type and hit enter...&quot;) {this.value = &quot;&quot;;}' type='text' value='To search type and hit enter...'/>   
</form>
</div>

- Anda bisa mengganti teks berwarna merah dengan teks kesukaan anda.
Maka tampilan akan seperti gambar di bawah ini :

8. Simpan.

Demikian tutorial kali ini, semoga bermanfaat ya. Dan semoga berhasil, namun jika kalian merasa ada kendala dengan trik di atas, silahkan untuk langsung diskusi dengan saya.

Terima kasih!