blogger search form

Hello, kali ini saya akan menuliskan artikel mengenai blogger search form. Pada dasarnya blogger telah menambahkan secara default search form pada laman dasar widget. Namun, kita juga bisa menggunakan non default search form sehingga kita bisa melakukan kustomisasi sendiri. berikut merupakan beberapa hasil kustomisasi saya dalam menggunakan search form :

<form expr:action="data:blog.homepageUrl + &quot;search/&quot;" id="search1" method="get">
<input class="search-input" id="q" name="q" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" type="text" value="Search" />
<input class="search-icon" name="submit" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" type="image" />
</form>


<style>
#search1 {
background: #333;
width: 300px;
padding: 5px;
position: relative;
}
#search1 .search-input {
width: 275px;
border: none;
padding: 5px 20px 5px 5px;
}
#search1 .search-icon {
position: absolute;
right: 10px;
top: 13px;

}
</style>

<form expr:action="data:blog.homepageUrl + &quot;search/&quot;" id="search2" method="get">
<input class="search-input" id="q" name="q" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" type="text" value="Search" />
<input class="search-icon" name="submit" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" type="image" />
</form>

<style>
#search2 {
background-color: lightcyan;
width: 300px;
padding: 5px;
position: relative;
border-radius: 3px;
box-shadow: 1px 1px 1px lightblue;
}
#search2 .search-input {
width: 275px;
border: none;
padding: 5px 20px 5px 5px;
}
#search2 .search-icon {
position: absolute;
right: 10px;
top: 13px;

}
</style>

<form expr:action="data:blog.homepageUrl + &quot;search/&quot;" id="search3" method="get">
<input class="search-input" id="q" name="q" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" type="text" value="Search" />
<input class="search-icon" name="submit" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" type="image" />
</form>

<style>
#search3 {
width: 500px;
position: relative;
}
#search3 .search-input {
width: 420px;
border: 1px #888 solid;
padding: 5px;
border-radius: 3px;
}
#search3 .search-icon {
background: #efefef;
padding: 5px 20px;
position: absolute;
right: 0px;
top: 2px;
border-radius: 3px;
box-shadow: 1px 1px 1px #777;
}
</style>

sekian artikel tentang blogger search form dari saya, jika ada pertanyaan silahkan tinggalkan komentar melalui form di bawah ini :