Menghias Laman statis blog dengan boxsearch ( kotak pencarian )

Apa kabar sobat ..???

kesempatan kali ini saya coba mensharing dan mengotak atik cara membuat box pencarian ...banyak sih macam - macam box pencarian dan di blogger sebenar nya sudah tersedia yang sangat berguna sekali untuk mencari suatu artikel,gambar atau pun video secara singkat pada suatu blog atau web...dah lama sekali saya ingin mencoba membuat boxsearch sejajar dan terletak di sebelah kanan pada laman statis seperti gambar di atas setelah mencari kesana kemari..hilir mudik...mengobok-ngobok kode html ampe sempet pusing 9 keliling akhir nya berbuah pepaya..eh salah,,berbuah hasil....he he he

Seperti yang sobat lihat pada gambar di atas sedikit di modifikasi dengan menambahkan icon search nya padahal pertama nya masih polos berbentuk kotak doang...nah jika sobat berminat untuk mencoba nya lihat tahapan-tahapan nya di bawah ini :

1.Seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN
2.Anda klik Edit HTML

3.sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula. 

4.Jangan lupa di centang Expand Template Widget  

 

5.CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard)
 cari kode ]]></b:skin>


6.Letak kan kode di bawah ini di atas tag  ]]></b:skin>

 /* 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}

7.Selanjut nya cari kode di bawah ini :

 <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'>

Setelah ketemu ..masukan kode dibawah ini  Kode search box nya di bawah tag <ul> seperti yang terlihat pada tulisan berkedip di atas.

Kode search box

<div id='search'>
<form action='http://web.gallerydunia.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/AVvXsEiHG1PgaaSPQz4faUi6AaZ9ivlfEwOf6Hzf0aIjge_tWiNJ-brMD2rP_H0Q6bBKiILxHTfTGafUlk9siWR_Do56cZsHg43f_bYkMz8IZr0pKNnDEE55nPBuf2L50cTFh7nBr2X3uwy9_xga/s1600/magnifier.png' type='image'/></form>
</div>

Catatan :

• Tulisan berwarna merah bisa anda ganti dengan link icon gambar lain nya seperti gambar panah,gelas,atau gambar yang di sukai.

• Tulisan berwarna kuning ganti dengan  sobat alamat URL blog .

8. Selesai dan simpan templete dan sekarang mari kita lihat hasil nya.

Semoga tahapan-tahapan yang kita lewati seperti keterangan di atas maka insya allah bisa sesuai harapan...maka bertambah lagi koleksi untuk dapat mempercantik blog kita..kayak nya sekian dulu ya belajar kali ini jika ada kendala dalam menerapkan tutorial di atas silahkan tinggal kan saran dan kritik nya di kotak komentar....

Dunia web desain

By : syafrizal