Add Responsive Search Box to Blogspot

Search Box Type 1:

Navigation:

1. Login to the blogspot.

2. On Dashboard >> Click Layout >> Click Add a Gadjet at right side frame >> Select HTML/Java Script.

3. Now select HTML/Java Script >> copy and past the follwing code in Content box & Click Save.

4. Open the blogspot and See.

Responsive Search Box Code:

"
<div id="_bcd_141013" style="display:none"></div>
<style type="text/css">
form#_bcd_141013_search_form {
    position: relative;
    display: block;
    clear: both;
    float: none;

border: /*border-width-s*/1px solid;/*border-width-e*/
border-color: /*border-color-s*/#dddddd;/*border-color-e*/
    padding: /*padding-s*/5px;/*padding-e*/
    font-size: /*font-size-s*/12px;/*font-size-e*/
background-color: /*bg-color-s*/#ffffff;/*bg-color-e*/
}
input#_bcd_141013_search_text {
    width: auto;
    border: none;
    margin: 0;
padding: 0;
    line-height: 2em;
    height: 2em;
    outline: none;
background: transparent;

color: /*text-color-s*/#000000;/*text-color-e*/
}
button#_bcd_141013_search_submit:hover {
    opacity: 0.8;
}
button#_bcd_141013_search_submit {
    width: auto;
padding: 0 /*padding-s*/5px;/*padding-e*/
    margin: 0;
    position: absolute;
    right: /*padding-s*/5px;/*padding-e*/
    top: /*padding-s*/5px;/*padding-e*/
    line-height: 2em;
    height: 2em;
    text-align: center;
    cursor: pointer;
border: none;
min-width: 2em;

color: /*submit-text-color-s*/#000000;/*submit-text-color-e*/
    background: /*submit-bg-color-s*/#f0f0f0;/*submit-bg-color-e*/
}
html[dir="rtl"] button#_bcd_141013_search_submit {
right: auto;
left: /*padding-s*/5px;/*padding-e*/
}
</style>

<form action='/search' id='_bcd_141013_search_form' method='get'>
<input id='_bcd_141013_search_text' name='q' placeholder="Search..." data-placeholder-end="" type='text'/>
<button type="submit" id="_bcd_141013_search_submit"><i class="fa fa-search"></i></button><!--endofsearsubmit-->
</form>

<script type="text/javascript">
/*
Name: Natural Search Box with Multi Design
Author: Tien Nguyen
Site: http://www.sneeit.com/
Version: 1.0
License GNU
*/
var ss = document.getElementsByTagName('link');
for (var i = 0; i < ss.length; i++) {
var href = ss[i].getAttribute('href');
if (href && href != null && href.indexOf("font-awesome/") != -1) {
        break;
}
}
if (i >= ss.length) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";
}
document.getElementsByTagName("head")[0].appendChild(link);


</script>
"

------------------------------------------------------------------------------------------------------------------------------------------------------------------

Search Box Type 2:

Navigation:

1. Login to the blogspot.

2. On Dashboard >> Click Layout >> Click Add a Gadjet at right side frame >> Select HTML/Java Script.

3. Now select HTML/Java Script >> copy and past the follwing code in Content box & Click Save.

4. Open the blogspot and See.

Responsive Search Box Code:

"
<style> #search-box { position: relative; width: 100%; margin: 0; } #search-form { height: 40px; border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; overflow: hidden; } #search-text { font-size: 14px; color: #ddd; border-width: 0; background: transparent; } #search-box input[type="text"] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; } #search-button { position: absolute; top: 0; right: 0; height: 42px; width: 80px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color: #4d90fe; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer; } </style> <div id='search-box'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='Search Here...' type='text'/> <button id='search-button' type='submit'><span>Search</span></button> </form> </div>
"

***
MAHESH IT ONLINE