Stunning Search Box (No Button) Widget For Blogger

Have you ever seen a search box widget without a button? Whatever your answer is, today I have a cool search box widget to share with you. As said above, the widget doesn't have any button as you think. The visitor can search by entering their query in the search box and can finish the search by pressing the enter button in the keyboard. As of all our widgets, this widget too is highly customizable and uses the default blogger search form. Want to add it to your blog? Then just follow the below steps to do so...

Adding Stunning Search Box(No Button):

Step 1: Move on to your Blogger Dashboard >> Layout >> Add Gadget:

Step 2: Choose HTML/JavaScript Gadget and add the below code into it.

<style>
@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: local('Abel'), local('Abel-Regular'), url(http://themes.googleusercontent.com/static/fonts/abel/v3/EAqh528fFdbUek8UOky4sA.woff) format('woff');
}
.search #s {width:190px; padding:5px; border:0px; font-size:13px; color:#333; background:#d5d5d5; font-family: 'Abel', arial, serif !important;}
</style>

<div class="search"><form action="/search" class="search_form" method="get"><p>
            <input name="q" type="text" onblur="if (this.value == &#39;&#39;) {this.value = &#39;search this site&#39;;}" onfocus="if (this.value == &#39;search this site&#39;) {this.value = &#39;&#39;;}" id="s" name="s" value="search this site" class="text_input" />
            <input type="hidden" value="Search" id="searchsubmit" />
</p></form></div>

Step 3: Now click the orange save button.

Want to Make the Widget Float?

If you wish to make the widget stick to the top of the screen like our previous floating search box, then you have to add a small piece of code to the above code. The same CSS fixed property is used to do so. Follow the below steps to make the widget float...

Just below the <style> in the above code, paste the below code.

.search {
position: fixed;
right: 12px;
top: 1%;
z-index: 100;
}

Customization

• Replace #d5d5d5 with some other color code to change the color of the widget.
• Replace 190px with any other value to change the width of the widget.
• "search this site" shows the text inside the search box, you can replace it with your own text.

That's it! Now you have a cool and stunning search box in your blog! If you liked this widget and wish to stay connected with our blog the please follow us on twitter at @BloggerGarage!