Formulir Kontak

Nama

Email *

Pesan *

Membuat Search Box di Blog

Aizzan Blog -- Berikut ini saya akan memberikan tutorial cara mudah untuk membuat search box di blog untuk sobat semuanya dan sebelumnya saya juga sudah pernah membuat artikel yang sama tentang tutorial membuat search di blog, kalau yang sebelumnya itu cuma ada kode script biasa ditaruh pada gadget sedangkan kali ini cukup banyak kode script untuk membuat search box di blog seperti di blog saya ini. Bisa sobat lihat screenshot di bawah ini

Aizzan Blog:  Membuat Search Box di Blog
Aizzan Blog:  Membuat Search Box di Blog
Search box diatas saya pasang di bagian bawah dari top navbar jadi saya gabungkan kode tersebut dengan top navbar, jika kita scroll ke bawah akan tetap mengikuti. Untuk tutorialnya silahkan mengikuti langkah - langkah di bawah ini

1. Buka web blogger.com
2. Login dengan akun sobat
3. Masuk ke "Template"
4. Backup template dulu sebelum beranjak ke "Edit HTML"
5. Masuk ke "Edit HTML"
6. Cari kode ]]></b:skin>, lebih cepat tekan Ctrl+F (F3)
    #menu-right{float:right;display:inline;width:160px;padding-top:5px;margin-right:5px}
#topsearch1 #feed-1{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#333}
#topsearch1 #feed-s{width:126px}
#search{height:18px;width:150px;background:#aeaeae;padding:0}
#search input{border:0;background:none;color:#575757}
#s{font-size:12px;width:120px;padding-left:4px;background:none;margin:0}
#topsearch #search{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#fff;border:1px solid #999}
#topsearch #s{width:125px}
7. Masukkan kode di bawah ini tepat di atas kode ]]></b:skin>
8. Simpan template
9. Masuk ke "Tata Letak"
10. Klik "Tambahkan Gadget"
11. Pilih "HTML/JavaScript"
12. Masukkan kode di bawah ini
    <div id='menu-right'>
<div id='topsearch'>
<div id='search'>
<form action='/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s' 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 alt='search' src='http://2.bp.blogspot.com/-Hf8y__yTzeU/UOMS0CJuMBI/AAAAAAAACh0/F-CWVrlHxko/s1600/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' title='Search' type='image'/>
</form>
</div></div></div>
13. Simpan dan lihat hasilnya

Jika sobat mempunyai menu float fixed atau melayang di blog bisa sobat sisipkan kode no 12 pada bagian kode float sebelum kode akhir "</ul> dan </div>".

Semoga artikel di atas dapat membantu dan bermanfaat bagi semuanya jikalau ada kendala, kritik, dan saran silahkan kirim melalui form kolom komentar di bawah artikel ini.

Terima Kasih

Previous
Next Post »
0 Komentar