6 Best Stylish Animated Custom Search Box Gadget for blogger

Share:
A search box is the basic but most required part of any blog or website. A search box widget can help your readers to navigate right through your blog more effectively.

Stylish Custom Search Box widget for blogger

Usually, the search box on blogger comes along with your template, or you can manually add a simple search box widget from your layout page.

In this post, I will show how to add stylish & animated custom search box gadget to your blog using free HTML codes. But before we proceed, I want you to know why a search box is a necessary part of any webpage.
  • A search box will help your readers to easily navigate your blog.
  • It will save lots of time & efforts by providing you accurate search results for your given keywords.
  • It will help your blog to look more professional.
  • Show custom or animated search box to impress your audience.

There more benefits of using the search widget on your blog. Below I will show you step by step guide for adding a search box gadget o your blog for free.

How to Add Simple Search Gadget to Blogger?

1. Login to your blogger account and open your Layout Page.

2. Click on Add a Gadget.

3. Now click on Blog Search Widget, write a title and click save.

Now, save the arrangement and preview your blog & you're done!

Custom Animated Search Box Gadget for Blogger

Below are the HTML codes for custom animated search box for Blogspot bloggers.


1. A white color simple animated search box

simple animated search box
<style> 
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
</style>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>
2. Half Black color animated search box

Black color animated search box
<style type="text/css">
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]
{background:url(http://2.bp.blogspot.com/-
xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-
serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-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;}#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px
solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/></form>

Stylish Custom Search Box Gadget for Blogger

Just having a Search Bar on your blog is not enough, it should be matched with your theme color and look professional. Below are some stylish designed mobile-friendly search box CSS codes.

1. Dark black color corner rounded search box

black color corner rounded search box
<style type="text/css">
#nbc-searchbox{background:url(http://4.bp.blogspot.com/-xDMUT_7p820/Ue7AMp2_XZI/AAAAAAAAAho/N2xwuQ1GU1I/s1600/noxdo_blogspot_com_Search-icon3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" 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...";}'/>
</form>
</div>
2. Simple green button search box

Simple green button search box for blogger
<div class='search-box'>
<style>
#search-area {
background: #ffffff url('http://3.bp.blogspot.com/-MwrrIYVDUVw/VLNoaSyTJ5I/AAAAAAAADqc/K3j7KYlQ2oQ/s1600/search-input-bg.png') no-repeat;
height: 52px;
}
#search_field {
margin-top: 8px;
margin-left: 12px;
outline: 0;
border: 0;
padding: 2px 0;
height: 38px;
float: left;
width: calc(100% - 70px);
width: -moz-calc(100% - 70px);
}
#search_submit {
background: #ffffff url('http://4.bp.blogspot.com/-M9mjb64M91U/VLNoaZCwJuI/AAAAAAAADqY/oQUKnb-SbD4/s1600/search-input-btn.png') no-repeat -1px -1px;
background-size: 56px 40px;
border: 0;
width: 58px;
height: 38px;
margin-top: 8px;
float:right;
}
#search_submit:active, #search_submit:focus {
border: 0;
outline:0;
}
</style>
<div id="search-area">
<form expr:action="/search" method="get">
<input autocomplete="off" type="text" name="q" placeholder="Search..." id="search_field"/>
<input type="submit" id="search_submit" value=""/>
</form>
</div>
3. Stylish grey color search box with hover button

Stylish search box with hover button
<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}
#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
    background: #4f5356;
}
#button-submit:active {
    background: #5b5d60;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>
</div>
4. Simple white color, fast loading search box

Simple fast loading search box
<center>
   <style> 
   #search {  
   border: 1px solid #BDBDBD;  
   background: white url(https://lh4.googleusercontent.com/-pVUC_2t4N3Q/VHUyuRgha5I/AAAAAAAAC6g/Wm6jR3X_21U/h120/search3.png) 98% 50% no-repeat;  
   text-align: left;  
   padding: 8px 24px 6px 6px;  
   width: 75%;  
   height: 18px; mouse:pointer:  
   }  
   #search #s {  
   background: none;  
   color: #BDBDBD;  
   font-family: verdana; 
   font-size: 11px;  
   border: 0;  
   width: 100%;  
   padding: 0;  
   margin: 0;  
   outline: none;  
   }  
   </style> 
   <div id="search" title="Type and hit enter"> <form action="/search" id="searchform" method="get"> <input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" type="text" value="Search" /> </form> </div>  
   <br/><br/>
   </center>
How to Add Stylish Search Box Widget to Blogger
If you don't know how to add HTML codes to blog, read this guide:

• Blogger Widgets: How to Add Html Codes in Blogger

1. Login to your Blogger account, go to Layout > tap on the 'Add a gadget' link on the right side.

2. Select HTML/JavaScript from the pop-up window > paste the code inside the empty box.

4. Click Save & you are done!

Conclusion
By performing above easy steps, you can easily add stylish, animated, fancy custom search box widget to your blog for free.

Getting error while saving the codes? Let me know in the comment box below!

No comments