How To Add (Blogger) Stylish Search Box in HTML

A search box is required in the blog widget. Its function makes it easy for visitors to find the writing or article they need.
stylish search box in Html

Blog administrators themselves often use this search box to find posts that will be edited or linked in new posts ( internal links ). 

Lots of models, designs, or styles of search boxes that can be installed in the blog sidebar, starting from the default Blogger search box to those that have been modified – simple, simple, hover, and many other options.
With a search box, a blog or website will be more user-friendly. Moreover, the main activity of internet users, in general, is searching ( searching ).
stylish search box in Html CSS code

Install a Search Box in the Blog Sidebar

• Click Layout > Add a Gadget
• Select/click Blog Search

Save Arrangement!

Done!

2: Modified Search Box (Stylish)

 

Click Layout> Add a Gagdget

 

Select / click HTML / Javascript

 

 

 

 

 

Stylish Search Box HTML Code

 

Copy or paste one of the following codes in the box provided. Please select the search box that suits your blog design or taste.

 

 

 

 

 

 

Html Code For Search Box:

 

 

 

<style>
form.example {margin:0}
form.example input[type=text] {padding: 10px;font-size: 15px;border: 1px solid #f0f0f0;border-right: none;float: left;width: 85%;background: #f1f1f1;}
form.example button {float: left;width: 15%;padding:7px 10px;background: #f1f1f1;color: black;font-size: 20px;border: 1px solid #f0f0f0;border-left: none;cursor: pointer;}
form.example button:hover { background: #c00;color:#fff;}
form.example::after {content: “”;clear: both; display: table;}
</style>
<form class=”example” action=”/search” method=”get”>
<input id=’q’ name=’q’ onblur=’if(this.value==&apos;&apos;)this.value=this.defaultValue;’ onfocus=’if(this.value==this.defaultValue)this.value=&apos;&apos;’ type=’text’ value=’Search…’/>
<button type=”submit”><i class=”fa fa-search”></i></button>
</form>

Html code for Black Search Box

com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png); } </style><br> <p> com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png); } </style><br> <p> value=” “/> </form><br> <p>value=” “/> </form><br> <p>

Html code for Gray and Black Search Box

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: 0px; width: 43px; height: 45px; } </style><br> <p> 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: 0px; width: 43px; height: 45px; } </style><br> <p> 45px; } </style><br> <p> 45px; } </style><br> <p>

Html code for Unique Search Box

Html code for Search Box Type Here

type=”text” size=”15″ placeholder=”Type here…” /> </form><br> <p>type=”text” size=”15″ placeholder=”Type here…” /> </form><br> <p>

Html code for Radius Box Search

Html code for Color Background Search Box

<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>

Replacing the red code with the color code in the image will change the background of the search button.

Html code for Hover Search Box

</p><br> <div><p>

Html code for a White color Search box

</p><br> <div><p>

so that’s all our collection which one you like the search box just copy the HTML code and use them anyone search box you really like if you have any problem installing the search box just comment down below i will give you a replay soon as possible Good Luck & Happy Blogging!