1. Log in to blogger Design > Page Element.
2. Click Add Gadget and select 'HTML/Javascript
3.Now Paste One of below code style as your like
Style 1
<style type="text/css">#btrix-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjiLkQNLh3fouEeu4azOr9I3RCHA1vlcB21TTO_6YK90BcR-NIk4ivluYRe2aS1WvquMaXY_TUWeA4bnPP4cYLf3rla1qhP_Nr-cFqDV7wHOs0-Cn0dBdXcRg9wIxlnqRAKYTLGh4BfyeG/s1600/red.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#btrix-searchform {
display: block;
padding: 9px 16px;
margin: 0;
}
form#btrix-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#btrix-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="btrix-searchbox">
<form id="btrix-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
onblur='if (this.value == "") {this.value = "Search...";}' />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
/>
</form>
</div>
Style 2
REPLACE THE RED COLOR CODE WITH BELOW CODE
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJRzEEyEx6MwXwKr1gZyUmB_841MU32OPuMy98gV8dGYcaxwdYlunUVHQGuv_8KSlphOIpkLiMkkC3LMXj8FgYjEa_kvlSRgME00VzmHYZXK5WvH7nhk0-c5FlzTZzMF0QgcbHF4vkHBa/s1600/purple.png
Style 3
REPLACE THE RED COLOR CODE WITH BELOW CODE
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUsAwNuzjPafdOGNne2d_5NMd_kn7XghLGntUbABX31ZNEjG_x7C6CfDNnb9aqKZ64fvfLlfeXu1Inwr2l0JW5HYzC4OCzgGvUGijIFSy4t5C7Nxp6skKYawaBhU9HCbWMYyNF5aQJGnDY/s1600/green.png
Style 4
REPLACE THE RED COLOR CODE WITH BELOW CODE
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1MZ47B36q3tTJAf2ZUe2ZdUMDQppNwUiDKem3Fj6Fjft5kDRtdZiv__qXJ6slwb3wJIwcNQTjDVukrzkcqCZ5ugKVW2uBd9tPr3V077nM9iobIAAxIvhRd8y2Pwrzy0Rgy9rxG4eIhVWs/s1600/blue.png
Style 5
REPLACE THE RED COLOR CODE WITH BELOW CODE
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv098eV_Gx3ypy-RUxaVB6s6A7Z0uMX55sMk1NUN2RxyKKMRPZbWmETtyIXInjRomCgfnmau1fDuLY9ybViZoUtK1BcP82Hm7BbjC__aPf2ESQqmKhYyHZKSAIPxcMJ9rOdzMABuXU1dyi/s1600/orange.png
4. Now save your HTML/Javascript'.
You are done...
No comments:
Post a Comment