Membuat Kotak Search Blog Seperti Google

Unknown

Tutorial Blogging, Widget

19 Okt 2013

5 Komentar

Membuat Kotak Search Blog Seperti Google - Sudah 3 hari saya tidak memposting di blog ini, karena banyak kegiatan diluar plus masih bingung mau posting apa?, dan akhirnya saya ketemu sama blog Kompi Ajaib yang memposting tentang memodifikasi search blog menjadi seperti Google, seperti pada kotak search blog ini. Maka dari itu, saya akan membagaikannya kepada teman-teman semua yang barang kali ada kebutuhannya dalam segi penampilan atau keperluan.

Tapi disini saya akan memberikan kualitas kotak search lebih baik dari kotak search manual, salah satunya memiliki perubahan warna border ketika hover dan pengetikan keyword pada kotak pencariannya, jadi telah saya update sebelumnya dari Kompi Ajaib. Nah, bagi Anda yang sudah tidak sabar memiliki fasilitas hasil modifikasi search box ini, silahkan simak beberapa materi yang telah saya rangkum:

1. Masuk ke Blogger dan login
2. Masuk kemenu Template lalu Edit Html
3. Cari kode ]]></b:skin> atau </style> (pilih salah satu)
4. Lalu copy kode dibawah, dan pastekan diantara kode no.3

#search {background: #fff;border-radius: 2px;}

#search-form {color:gray;width:50%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #ccc;border-radius:2px;}

.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}

#search-form:hover{border:1px solid #aaa}

#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}

Kode yang biru adalah background, bisa diganti sesuai keinginan Anda. Lihat kode warna disini. Sedangkan kode merah lebar (responsive), bisa Anda sesuaikan dengan kebutuhan blog. Anda juga bisa mengedit kode tersebut.

5. Kemudian, copy kembali kode berikut, dan pastekan di HTML.

<div id='search'>

<form id='searchform' action='/search' method='get' target='_blank'>

<input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>

<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuR41aU7OrKvL7tRl6bCANQ2rCy7sJe9HRfAxYuAePckRJr2UK5a-zPXPEbDR6Zx9hh0pRkkaYa52vrGRsaq3x1PBCGZhqFFISVkwirW5M5W_ekvqTC6eUF15ORtgK9yvnoFDCXSP424Pp/s1600/search.png' title='Search' width='21'/>

</button>

</form>

</div>

Anda juga bisa sesuikan kode diatas , sama dengan langkah no.4

Demikian artikel Membuat Kotak Search Blog Seperti Google. Bila ada yang belum faham atau ada kejanggalan dengan kode diatas, silahkan Anda isi pada form komentar dibawah. Dan jangan lupa untuk membagikan artikel ini bila suka :D, semoga bermanfaat..