Menambah search box pada Pagelist blogger baru

Belum lengkap rasanya bila blog kesayangan kita tidak dilengkapi dengan search box atau kotak pencarian. Tidaklah sulit untuk memasang search box pada sidebar, karena sudah banyak tutorial yang membahas tentang cara memasang search box pada blogger.

Yang jadi persoalan sekarang apakah sudah memenuhi unsur estetis atau keindahan dalam penampilan blog? Bagi saya pribadi pemasangan search box yang baik menurut saya adalah bila dipasang di sebelah kanan menu navigasi atau menu tab.
 

Blogger baru sudah menyediakan fitur tambahan berupa page list dan juga linklist. Sehingga kita tidak perlu repot-repot membuat menu tab di bawah header.  Dengan memanfaatkan ruang kosong di samping kanan deretan pagelist dapat dipasang search box atau kotak pencari. Dalam tutorial kali ini saya berasumsi bahwa anda sudah memasang Pagelist dan meletakkannya di bawah header.  Jika belum, segeralah tambahkan Pagelist di blog anda, kalau tidak tau caranya, cari sendiri di google karena yang akan saya informasikan di sini bukan tutorial tentang cara menambahkan Pagelist tapi menambahkan search box pada Pagelist.

Baiklah langsung saja simak baik-baik tips berikut ini ;

1. Pertama carilah  kode   ]]></b:skin>
Tambahkan kode ini tepat di atasnya :

/* search
===================== */
#search{width:210px;font-size:11px;float:right;margin:0 27px;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}

2. Simpan atau Save

3. Selanjutnya cari kode :

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>

Masukkan kode search box disini

<b:loop values='data:links' var='link'>

"Kode search box yang harus dimasukkan":

<div id='search'>
<form action='http://brugkembar.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='http://i50.tinypic.com/1zehw2f.jpg' type='image' value='Go'/>
</form>
</div>

Save dan lihat hasilnya, sekarang Pagelist anda sudah ada search box-nya.
Gimana…keren khan?

Keterangan :
brugkembar.blogspot.com diganti dengan url blog anda.