today i am going to share four Professional Search Box Code with you one by one.use below some simple steps ...
- Login to Blogger >> Click on drop down >> Now select "Layout"
- Now you will see "Add a Gadget" button click any of them
- A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
- Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.
Search Box - 1
Code for Seacrh box - 1
<style type="text/css">
#searchbox
{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 270px;
height: 35px;
padding: 10px;
overflow: hidden;
}
#search, #submit
{
float: left;
}
#search
{padding: 5px 9px;
height: 23px;
width: 180px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); }
#submit
{ background: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 60px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#submit:hover
{ background: #95d788;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}
#submit:active
{
background: #95d788;
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#submit::-moz-focus-inner
{
border: none;
}
#search::-webkit-input-placeholder {
color: #9c9c9c;
font-style: italic;
}
#search:-moz-placeholder {
color: #9c9c9c;
font-style: italic;
}
#search.placeholder {
color: #9c9c9c !important;
font-style: italic;
}
#search:focus
{
border-color: #8badb4;
background: #fff;
outline: none;
}
</style>
<form id="searchbox" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="Modernhackerss.blogspot.com" />
<input id="submit" type="submit" value="Search" />
</form>
Search box - 2(Streching #1)
 |
| Before Click |
 |
| After Click |
Code for search box - 2
<style>
#dark #search {
}
#dark #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7S8mfn0eNp_TTw8-fCAOLZ5F3VLKcFxKlN_yB_gmqgRv4x1-GmjbaMYbqN2_S5v8wB0vaLmJKRSiF_EEKzvtZ7PBd351N4m9XbPY9m-b8sbfqsB2x07nU2R4Os9fcqRm3_O3SBFAyQQ/s1600/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 180px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#dark #search input[type="text"]:focus {
width: 220px;
}
</style>
<div id="dark">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="32" placeholder="Modernhackerss.blogspot.com" />
</form>
</div>
Search box - 2 (Streching #2)
 |
| Before Click |
 |
| After Click |
Code for search box - 3
<style>
#white #search {
}
#white #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYywEa6DW_ffS7pXKm2HErJI2pAdG3szzf5x_kcEwtAfGHj-vNkxUJGWMHLsMHs1wd9174qn0rgjdxJjktHiWUhdCwHCbBAoQ3mO796ndtz32w7Qy6DeIQQEp-mXqOufC_eRfWzlN1ihc/s1600/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 180px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#white #search input[type="text"]:focus {
width: 220px;
}
</style>
<div id="white">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="32" placeholder="Modernhackerss.blogspot.com" />
</form>
</div>
Search box - 4 (Streching #3)
 |
| Before Click |
 |
| After Click |
Code for search box - 4
<style>
#apple #search {
}
#apple #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYywEa6DW_ffS7pXKm2HErJI2pAdG3szzf5x_kcEwtAfGHj-vNkxUJGWMHLsMHs1wd9174qn0rgjdxJjktHiWUhdCwHCbBAoQ3mO796ndtz32w7Qy6DeIQQEp-mXqOufC_eRfWzlN1ihc/s1600/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:180px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#apple #search input[type="text"]:focus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7S8mfn0eNp_TTw8-fCAOLZ5F3VLKcFxKlN_yB_gmqgRv4x1-GmjbaMYbqN2_S5v8wB0vaLmJKRSiF_EEKzvtZ7PBd351N4m9XbPY9m-b8sbfqsB2x07nU2R4Os9fcqRm3_O3SBFAyQQ/s1600/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 220px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
</style>
<div id="apple">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Modernhackerss.blogspot.com" />
</form>
</div>