How To Add (Blogger) Stylish Search Box in HTML

- January 21, 2020
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

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

    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:

    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

    Html code for Gray and Black Search Box

    Html code for Unique Search Box

    Html code for Search Box Type Here

    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

    Html code for Clean Search Box

    Html code for a White color Search box

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

    Also Read:
    Automatically Update Blog Footer Year
    Textsheet Alternative