5 Best Stylish Search Boxes For Blogger Blog

The official search box is very simple but Today i will share Top 5 Search Boxes for Blogger blog to add Stylish srach box to your blogger blog search box help page visitor to find what they want. This allows people to get ais available in Blogger Gadget but this search box is very simple and not stylish so, acess to some of your hidden content that would take much longer to find by clicking through countless pages or posts. 

    Benefits of Adding Custom Stylish Search Box

    • Add professional looks to your website.
    • Provide basic benefits to customers.
    • Save user time.
    • Can be applied anywhere like in header, sidebar, footer etc.
    • Stylish Active,hover and focus effects.

    How To ADD Search Box in Blogger

    Follow These steps:
    1. Sign into your blogger account.
    2. Go to the Blogger Dashboard/Overview.
    3. Select Layout section from the left menu.
    4. Click on the Add a Gadget.
    5. Click on the Blue Plus Button of the HTML/Javascript Gadget.
    6. Then choose one of the Search Box.
    7. Copy search box code and paste into your HTML/Javascript box.


    1. Search Box Style

    <style type="text/css">
        #hbz-searchbox {
            min-width: 250px;
            margin: 10px auto;
            border-radius: 3px;
            overflow: hidden;
            max-width: 300px;
        }
       
        #hbz-input {
            width: 59.2%;
            padding: 10.5px 4%;
            font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
            border: none;
            background-color: #EEE;
        }
       
        #hbz-input:focus {
            outline: none;
            background-color: #FFF;
            box-shadow: 0 0 2px #333333 inset;
        }
       
        #hbz-submit {
            overflow: visible;
            position: relative;
            float: right;
            border: none;
            padding: 0;
            cursor: pointer;
            height: 40px;
            width: 32.8%;
            font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";
            color: #FFF;
            text-transform: uppercase;
            background-color: #D83C3C;
        }
       
        #hbz-submit::before {
            content: "";
            position: absolute;
            border-width: 8px;
            border-style: solid solid solid none;
            border-color: transparent #D83C3C;
            top: 12px;
            left: -6px;
        }
       
        #hbz-submit:focus,
        #hbz-submit:active {
            background-color: #C42F2F;
            outline: none;
        }

        #hbz-submit:focus::before,
        #hbz-submit:active::before {
            border-color: transparent #C42F2F;
        }

        #hbz-submit:hover {
            background-color: #E54040;
        }

        #hbz-submit:hover::before {
            border-color: transparent #E54040;
    }
    </style>

    <form id="hbz-searchbox" action="/search" method="get">
        <input type="text" id="hbz-input" name="q" placeholder="Search..." />
        <input type="hidden" name="max-results" value="8" />
        <button id="hbz-submit" type="submit">Search</button>
    </form>

    2. Search Box Style

    <style type="text/css">

        #hbz-searchbox {

            height: 35px;

            margin: 10px auto;

            position: relative;

            min-width: 250px;

            max-width: 300px;

        }

       

        .hbz-buttonwrap {

            border: none;

            width: 14%;

            height: 35px;

            display: block;

            position: absolute;

            top: 0;

            right: 0;

            background: #444;

            cursor: pointer;

            border-top-right-radius: 5px;

            border-bottom-right-radius: 5px;

        }

       

        .hbz-buttonwrap:hover {

            background: #1a1a1a;

        }

       

        .hbz-submit {

            width: 35px;

            height: 35px;

            background: transparent;

            cursor: pointer;

            position: absolute;

            right: 50%;

            top: 50%;

            margin-top: -17.5px;

            margin-right: -17.5px;

            border: none;

        }

       

        .hbz-submit:after {

            content: '';

            position: absolute;

            width: 8px;

            height: 8px;

            border: 2px solid white;

            border-radius: 50%;

            left: 10px;

            top: 9px;

            box-sizing: content-box;

        }

       

        .hbz-submit:before {

            content: '';

            position: absolute;

            height: 8px;

            width: 2px;

            background: white;

            transform: rotate(-35deg);

            top: 19px;

            left: 21px;

        }

       

        #hbz-input {

            height: 35px;

            width: 82%;

            padding: 0px;

            padding-left: 4%;

            border: none;

            outline: none;

            position: absolute;

            right: 14%;

            box-shadow: inset 0 2px 2px #080808;

            background-color: #444444;

            color: #fff;

            border-top-left-radius: 5px;

            border-bottom-left-radius: 5px;

            transition: all 0.5s;

        }

       

        #hbz-input:hover,

        #hbz-input:focus {

            box-shadow: inset 1px 1px 10px #000;

        }

    </style>


    <form action="/search" id="hbz-searchbox" method="get">

        <span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span>

        <input type="text" name="q" id="hbz-input" placeholder="Search..." />

        <input type="hidden" name="max-results" value="8" />

    </form>

    3. Search Box Style


    <style>
    #nbc-searchblack1
    {
    background: #222222;
    border-radius:10px;
    width:290px;
    }
    #nbc-searchblackbox1
    {
    padding:10px;
    }
    #nbc-searchblacksubmit1
    {
    border:1px solid #222222;
    background: #dc4523;
    padding:5px;
    color:#ffffff;
    font:14px verdana;
    }
    #nbc-searchblackinput1
    {
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border:1px solid #ffffff;
    background:#ffffff;
    padding:5px;
    color:#888888;
    font:14px verdana;
    }
    </style>
    <div id='nbc-searchblack1'>
             <form action='/search/max-results=8'  method='get' id="nbc-searchblackbox1">
                <input name='q' id='nbc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
                <input id='nbc-searchblacksubmit1' type='submit' value='Search'/>
             </form>
          </div>

    4. Search Box Style


    <style type="text/css">

    #nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGC9_5bfbz9srDp4IBZmEhvheiqIdqPHmdfqgq5sfgMHLYCSzpA_lDtITkidred7Ait96esTMnhyrzEYwXioh66rTvmRSkceuxkJgCAJEn_VEaVAtEeOiJi-yNnWU1Chyphenhyphen-hfJGYvdpHMg/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

    form#nbc-searchform{display: block;padding: 12px;margin:0;}

    form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;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=""/>

    </form>

    </div>

    5. Search Box Style

    <style type="text/css">

        #hbz-searchbox {

            background-color: #F5F5F5;

            border: 1px solid #EDEDED;

            padding: 5px;

            border-radius: 10px;

            margin: 10px auto;

            min-width: 238px;

            max-width: 288px;

        }

       

        #hbz-input {

            background-color: #FEFEFE;

            border: medium none;

            font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif;

            margin-right: 2%;

            padding: 4%;

            box-shadow: 2px 1px 4px #999999 inset;

            border-radius: 9px;

            width: 60.33%;

        }

       

        #hbz-input:focus {

            outline: medium none;

            box-shadow: 1px 1px 4px #0D76BE inset;

        }

       

        #hbz-submit {

            background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat;

            border-radius: 9px;

            border: medium none;

            color: #FFF;

            cursor: pointer;

            font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif;

            padding: 4%;

            width: 28%;

        }

       

        #hbz-submit:hover {

            background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;

        }

    </style>


    <form id="hbz-searchbox" action="/search" method="get">

        <input type="text" id="hbz-input" name="q" placeholder="Type Here..." />

        <input type="hidden" name="max-results" value="8" />

        <input id="hbz-submit" type="submit" value="Search" />

    </form>

    Note: Change background color and edit search boxes as your needs.

    Now your visitors can navigate your blog easily. 

    I hope you like this article!

    Comments

    Post a Comment

    Popular posts from this blog

    How to Disable Copy Paste in Blogger Blog

    Image
    Like many blogger authors want to disable copy paste in their blogs to prevent the thieves to copy your blog materials like text images etc.Follow these simple steps to stop copy paste in your blogger blog easily. Why you need to disable copy paste in blogger blog? If the copy-paste function is enabled in your blogger blog, then Content Thieves will copy & paste your blog post on their blog. This means that you will see that your content is live on other blogs without your permission. I know that you can complain to Google to get rid of duplicate content. You should  Turn off Copy paste in blogger blog  because there are lots of thieves of your content. Most of the new blogger doesn't want to write content due to lack of knowledge and other reasons.So, i will share some codes to stop copy paste in your blogger blog so anyone cannot able to copy text or anything of your blogger blog Method 1: Using Javascript to prevent Copy Paste in blogger blog Follow These steps: Sign in...
    Read more

    5 Best Stylsih Custom Contact Form Widgets For Blogger Static Page

    Image
    Blogger contact form is very important to give your readers the opportunity to communicate with you. There is a Blogger Contact Form widget available in the list of Blogger’s default widgets. But If You Want to add custom Contact form widget on static page of your blogger blog Follow below steps. How to Enable Blogger Contact Form In Blogger? Follow These steps: Sign into your blogger account . Go to the Blogger Dashboard/ Overview . Select  Layout  section from the left menu. Click on the  Add a Gadget  (Sidebar/ Footer will be better) >  More Gadgets . Click on the  Blue Plus Button  of the Contact Form Gadget and then  Save  it. Now it is time to hide this default blogger contact widget because we are going to make our stylish contact form in a static “ Contact Us ” page. Hide Default Blogger Contact Form? Go to the “ Template>Edit Html . Press CTRL+F from your keyboard (Which will open search bar) Now find the style endi...
    Read more