Put a custom search engine in blogger

first, search for this option in your blogger template:

]]></b:skin>


second, copy the code below and paste it just befor the code above:


#search input {
        background: none repeat scroll 0 0 #D1D5D8;
        border: 0 none;
        color: #000;
        float: left;http://thenadhmitools.blogspot.com/
        font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
        height: 40px;
        margin: 0;
        padding: 10px;
        transition: background 0.3s ease-in-out 0s;
        width: 233px;
}

#search button {
        background: url("http://w3lessons.info/demo/windows-8-search-box/search.png") no-repeat scroll center center #00BFFF;
        cursor: pointer;
        height: 40px;
        text-indent: -99999em;
        transition: background 0.3s ease-in-out 0s;
        width: 40px;
        border: 2px solid #1A1A1A;
}

#search button:hover {
        background-color:#1A1A1A;
}

third, go to your blogger layout option, add an html gadget and past the code below: (you must leave the title option of the html gadget EMPTY)

<form method="get" id="search" action="/search">
              <input type="text" class="search" value="Search" onblur="if(this.value == &#39;&#39;) { this.value = &#39;Search&#39;; }" onfocus="if(this.value == &#39;Search&#39;) { this.value = &#39;&#39;; }" name="q" />
              <button type="submit">Submit</button>
</form>