Gadget Cahaya Warna Kotak Pencarian Untuk Blogger

Tampilan !

Style 1 

Kode

<style type="text/css">
#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkTvrvlduw5TJSAXtL09iAX1PRJa2RP36t5bhZ8Eh1Jur8SBt72qpQCkn2xnR19I2vkqPvbBVU3IgmjjJs_-2FgGQ5qOEELhi0tSeVZmMVpjRyMT66Optq5ZBu-8gRA76wySKUL76QMhZu/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

Kode

<style type="text/css">
#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrJrr0TM6TZdN-kvsrHIVrO3gKEZNbh-J_1agG-A-_0t27ubHS7TfMTfGmw8FC6zLhA0ckEHZyEX0e0Z5ksncuxgGmI_cRPkggSVPpmBqJIKVUSpzTTFoIaKoFk6spB-u6u4CGjzRZS_E4/s1600/purple.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 3 

Kode

<style type="text/css">
#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigp8_waPKVOEsEnsoT19Mobe_YDXcjZ2zY6b4dLC9c6QAawDiDIuNglFnY_ablsqFbTng-Pq1M1MZl_7qgKssiC8mtRYYotiWogm4BErGwhg9g67Jln3F2nxM4DcwCrk9hT1QwJzt-YZCI/s1600/green.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 4

Kode

<style type="text/css">
#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBRMprkXdahA5XNqvFLrVCpXG_qsAXuDRMxVMODjopclyoKuXoSJ4EigQfuxAw2N2NZoUb0s0TpXGDgIVfrKcHvdMISTY-0hA_7WWmKcSB2wuSCyEKZP6JCupr_3YId2L7m22wJrd5zRpG/s1600/blue.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 5

Kode

<style type="text/css">
#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd2ZC0Nn3g30SDdnJ2v1CZAWQ38Ma2FF7hTI6_-cNV_a_lmX8CmpIwh0hCp6mPhx_0sQzcZQ7qpgULHJ_Z1ZWFm5xOMn8pBCnPM6p3spTeui2bJjR0zf0pkhLYcOOPJOkMvvAdw3u0NpO9/s1600/orange.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>