Cara Membuat Search Form/Kotak Pencarian di Blogspot

Pada Postingan sebelumnya ebsof sudah berbagi tentang Cara Membuat Spoiler/Tombol Show Hide dalam Postingan. Kali ini ebsof akan berbagi cara  Membuat Search Form/Kotak Pencarian di Blogspot ...di bilang cukup penting dalam suatu website / blog, ini merupakan fasilitas user Friendly,,, memudahkan pengunjung blog untuk mengakses seluruh isi blog/website kita.

Dant Tentunya Membuat Search Form/Kotak Pencarian di Blogspot akan berdampak baik di mata google. 

berikut ini contohnya :


Langsung Saja berikut ini langkah2 nya :

1. Login ke Akun blog sobat
2. Setelah Login Pilih  Menu Template kemudian Edit HTML (Jangan Lupa Backup dulu Template anda)
3. Pada halaman Edit HTML cari code ]]></b:skin> (gunakan tombol CTRL + F mempermudah pencarian kode)
4. Setelah ketemu, Paste kan code di bawah ini di atas code ]]></b:skin> 

.searchform {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZdSZxg5L4-ujaStN2MBjx4T6hSEd5tdXHKntRo51_izAtr9U5EhImSaxJ4babl2b1ZMYxb2s36SSuHRyeHEcTU5wI7tEK5ueE946zsg44sQ497vMmx0B8oyyAmgbuKBIcTLFYze5un3gm/s1600/CarGam-search.png) no-repeat; width:550px;height:47px;
display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;border: solid 0px #ccc;padding: 0px;}
.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}
.searchform .searchfield {background: #e5e5e5;width: 416px;outline: none;margin:5px 2px 0px 5px;;border-top:1px solid #888;border-left:1px solid #888;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
.searchform .searchbutton {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbe2GQcoSL3HGpNp8HKt5_v3_Qa_HmNcgTQo45zDPQ51F6AucVaWzXCUL5NEMqzQVpHAPJKv3PWLW5pny6h0qt-LZBXdtgMOwkCAhOG908E96JlGlLFAigAVQgJhv5U-YcqHLi3FH88K42/s1600/bg_pencarian_cargam.jpg) no-repeat;height: 28px; width: 104px;border:none;}

5. Klik Simpan

------------Setelah Selesai Langkah di Atas---------- Ikuti Langkah dibawah ini,, Karena belum selesai lo---

6. Pada Bagian Layout, Pilih Add Gadget , Pilih HTML/Javascritp
7. Kemudian Pastekan Kode di bawah ini :

<form action=' /search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if (this.value ==  &quot;&quot;) {this.value = &quot;&quot;;}' onfocus='if  (this.value == &quot;&quot;) {this.value =  &quot;&quot;}' type='text' value=''/>
<input class='searchbutton' type='submit' value=''/>
</form>

8. Klik Simpan dan lihat hasilnya ..

Demikianlah Artikel Cara Membuat Search Form/Kotak Pencarian di Blogspot , semoga bermanfaat
LihatTutupKomentar