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!
    Done!
    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:


    <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

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

    http://feeds.feedburner.com/Iamhjacom
    Previous articleHow to Setting Robot txt Easy Guide
    Next articleBest Steam Profile Pictures CSGO Gaming Avatars
    Hi, i am Haider Jamal Abbasi and founder of iamhja.com. I start my blog journey in 2018 and i love writing on trending topics people love to read. Any Question? and Issue! Contact me

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here