Beautiful Light Color Search Box For Blogger

 

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/AVvXsEjHo19S8m7uMMGc9L_-6-F1qh-d12BjN7DsGt6UUeN05lmJVGJ0geZEqI7kKyCRjx1egp-BawuMCUf8RTD5NePEDV2uJaq9SJvdSupsQLtAo_dPegmbpW16Sbro4Q9tpOBWbSmPYKlMApjt/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/AVvXsEiIMVatPfEIHSMYqPmb4qH93Fmf2dq1Qd4CjyJdNA_Wk4aoX9W-xjnTM3wHtepf6un9NjBAOMjc1iwzfYP08mLSAdMvvsChA0J3V7zljoc0MbCwhphBm_IhwudXzxrI7nmf6HN9YD1avOSi/s1600/purple.png

Style 3

 REPLACE THE RED COLOR CODE WITH BELOW CODE

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsi2GzEYrPpZpHOrRcXVJUfc_GKCzffYDaKaFbFAmZEYghoxT5tgZlItb3GxaE2wMRrx64jigSqpmEDdM0CI4v7ySEzbKlpC5n1k4k1K7jjteeq7qi_DdOXZMtDgTEO9dE3sXW14z3sHzU/s1600/green.png

Style 4

 

 REPLACE THE RED COLOR CODE WITH BELOW CODE

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpxyg-CZB8K7aVhte0ge3tyUmAsElGAOLuB6zCsKkDIoCCeIBeL_lxWIcf5QmCiKQcxfXo-K1Rph7AH-k90eXXTWrkW_NQ_ez9YUlwbfbuaymzxCNeW0WtEbdAD9pLMdbBdz39xbHp5mVw/s1600/blue.png 

Style 5

 

 REPLACE THE RED COLOR CODE WITH BELOW CODE

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifTEvY7w63F4U6yhoWDHPCISc5P0dCCpousoc1SdZq7xq7n-6sJmQADk9gpYuPaNdoXlWPfSgY0ATCR8_2PJYtCyYA0DEj2eN7pVBEAVK_2lHX3YpP5AOOoGQsKlAV3Kqr-vm2vqNYufv7/s1600/orange.png 

4. Now save your HTML/Javascript'.

    You are done...