HomeTechHow To Add (Blogger) Stylish Search Box in HTML

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

How To Add (Blogger) Stylish Search Box in HTML 1

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

1: Default Search Box Blogger

Blogger provides a search box that lives installed in the sidebar of the blog. Here’s how to install it:
  • Click Layout > Add a Gadget
  • Select/click Blog Search
How To Add (Blogger) Stylish Search Box in HTML 2
Save Arrangement!
A search box has appeared on the sidebar blog.

2: Modified Search Box (Stylish)

We can also use the modified search box. Here’s how to install it on the sidebar blog.


Click Layout> Add a Gagdget


Select / click HTML / Javascript




How To Add (Blogger) Stylish Search Box in HTML 3



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.




How To Add (Blogger) Stylish Search Box in HTML 4




Html Code For Search Box:




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

Html code for Black Search Box

How To Add (Blogger) Stylish Search Box in HTML 5

Html code for Gray and Black Search Box

How To Add (Blogger) Stylish Search Box in HTML 6


Html code for Unique Search Box

How To Add (Blogger) Stylish Search Box in HTML 7

Html code for Search Box Type Here

How To Add (Blogger) Stylish Search Box in HTML 8

Html code for Radius Box Search

How To Add (Blogger) Stylish Search Box in HTML 9

Html code for Color Background Search Box

How To Add (Blogger) Stylish Search Box in HTML 10


<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

How To Add (Blogger) Stylish Search Box in HTML 11

Html code for a White color Search box

How To Add (Blogger) Stylish Search Box in HTML 12

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!

Haider Jamal Abbasi
Haider Jamal Abbasihttps://www.iamhja.com/
Hi, i am Haider Jamal Abbasi and founder of iamhja.com. Since 2016 I am doing freelancing, I love to write about the latest trending topics and share with you informational articles... Any Questions? and Issues? Contact me


Please enter your comment!
Please enter your name here
Captcha verification failed!
CAPTCHA user score failed. Please contact us!