Add Stylish Custom Search Box Widget To Blogger

I am showing how to Add Stylish Custom Search Box Widget To Blogger. Now this time will show you add widgets to blogger. Please read this topic ( Add Stylish Custom Search Box Widget To Blogger ) and comment.

1: Checkout our product

Online word counter seo tool

Add Stylish Custom Search Box Widget To Blogger

In this post we will share custom search widget for blogger blogs. Search Boxes are the most essential section of a website. It will help your visitors to navigate easily just by searching the thing that they in search box and search box will automatically give them the related content that they want. Blogger has its own search box widget for blogs, but its design is not much stylish. It is a simple design widget.

Responsive & stylish widget for blogger

1. Best Blogger Widgets & Gadgets
2. Social media widget.
3. Email subscription box.
4. Contact us form widgets for blogger 
5. Commentluv for blogger.

Here I introduce best attractive search bar widgets you can add right aside in your website. You just have to copy and paste the code on your blog without any modifications in it.

Add Search box widget to blogger 

1. Go to your blogger dashboard >> Layout
2. Select Add a gadget option.
3. Select HTML/JavaScript widget.
4. In the HTML/JavaScript widget. 
5. Paste code into it and Save the Gadget.

Read Also : Commentluv for blogger
Just copy the below code and add it into HTML elements. 

<style>
#abt-search-btn {
    background: none repeat scroll 0 0 #359BED;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#abt-search-box {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 none;
    padding: 10px;
    width: 160px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Type! :D "/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>

input.gsc-input { border: 1px solid #eee! important; padding: 11px! important; } input.gsc-search-button { margin-top: 0px! important; width: 100px; padding: 14px; border: none; background: # fee2d7; text-transform: uppercase; font-size: 10px; color: #ffffff; cursor: pointer; } input.gsc-search-button: hover { background: # 000000; }

This is like shows that

How do you change the look of the Search box?

Now we will deal with how to change the look of a not very interesting gadget. Everything is extremely simple.

Just go into the template designer - advanced - add CSS and add the code below. Of course, changing the color codes to your own (border - border, color - font color, background - background color)

input.gsc-input {

border: 1px solid #eee! important;

padding: 11px! important;

}

input.gsc-search-button {

margin-top: 0px! important;

width: 100px;

padding: 14px;

border: none;

background: # fee2d7;

text-transform: uppercase;

font-size: 10px;

color: #ffffff;

cursor: pointer;

}

input.gsc-search-button: hover {

background: # 000000;

}

1. Standard widget, no color blogger widgets 2020 Code for the above widget:

1. Standard widget, no color blogger widgets 2020 Code for the above widget: <div class = "searchform"> <form action = "/ search" id = "searchform" method = "get"> <table style = "width: 100% px;"> <tbody> <tr> <td style = "text-align: center;"> <input class = "sbox" id = "sbox" name = "q" onblur = "if (this.value == & quot; & quot;) {this.value = & quot; Search in this blog ... & quot ;;} "onfocus =" if (this.value == & quot; Search this blog ... & quot;) {this.value = & quot; & quot;} "style =" padding: 2px; width: 98%; " type = "text" value = "Search this blog ..." /> </td> <td style = "text-align: center;" width = "75px"> <input alt = "" class = "sbutton" id = "

 2. Black widget

<style type = "text / css">

# w2b-searchbox {background: url (http://dl.dropbox.com/u/106645823/search/czarny.png) no-repeat scroll center center transparent; width: 307px ; height: 50px; disaply: block;}

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

form # w2b-searchform #s {padding: 6px; margin: 0; width: 235px; font-size: 14px; vertical-align: top; border: none; background: transparent;}

form # w2b-searchform #sbutton {margin: 0; padding: 0; height: 30px; width: 30px; vertical-align: top ; border: none; background: transparent;}

</style>

<div id = "w2b-searchbox">

<form id = "w2b-searchform" action = "/ search" method = "get">

<input type = "text" id = "s" name = "q" value = "Search ..." onfocus = 'if (this.value == "Search ...") {this.value = ""} 'onblur =' if (this.value == "") {this.value = "Search ...";} '/>

<input type = "image" src = "http://dl.dropbox.com/ u / 106645823 / search / piksel.gif "id =" sbutton "/>

</form>

</div>

3. C widget broken

<style type = "text / css"> # w2b-searchbox {background: url (http://dl.dropbox.com/u/106645823/search/red.png) no-repeat scroll center center transparent; width: 307px ; height: 50px; disaply: block;} form # w2b-searchform {display: block; padding: 10px 12px; margin: 0;} form # w2b-searchform #s {padding: 6px; margin: 0; width: 235px; font-size: 14px; vertical-align: top; border: none; background: transparent;} form # w2b-searchform #sbutton {margin: 0; padding: 0; height: 30px; width: 30px; vertical-align: top ; border: none; background: transparent;} </style> <div id = "w2b-searchbox"> <form id = "w2b-searchform" action = "/ search" method = "get"><input type = "text" id = "s" name = "q" value = "Search ..." onfocus = 'if (this.value == "Search ...") {this.value = ""} 'onblur =' if (this.value == "") {this.value = "Search ...";} '/> <input type = "image" src = "http://dl.dropbox.com/ u / 106645823 / search / piksel.gif "id =" sbutton "/> </form> </div>

4. Golden widget

<style type = "text / css"> # w2b-searchbox {background: url (http://dl.dropbox.com/u/106645823/search/zolty.png) no-repeat scroll center center transparent; width: 307px ; height: 50px; disaply: block;} form # w2b-searchform {display: block; padding: 10px 12px; margin: 0;} form # w2b-searchform #s {padding: 6px; margin: 0; width: 235px; font-size: 14px; vertical-align: top; border: none; background: transparent;} form # w2b-searchform #sbutton {margin: 0; padding: 0; height: 30px; width: 30px; vertical-align: top ; border: none; background: transparent;} </style> <div id = "w2b-searchbox"> <form id = "w2b-searchform" action = "/ search" method = "get"><input type = "text" id = "s" name = "q" value = "Search ..." onfocus = 'if (this.value == "Search ...") {this.value = ""} 'onblur =' if (this.value == "") {this.value = "Search ...";} '/> <input type = "image" src = "http://dl.dropbox.com/ u / 106645823 / search / piksel.gif "id =" sbutton "/> </form> </div>

5. Blue widget

<style type = "text / css"> # w2b-searchbox {background: url (http://dl.dropbox.com/u/106645823/search/niebieski.png) no-repeat scroll center center transparent; width: 307px ; height: 50px; disaply: block;} form # w2b-searchform {display: block; padding: 10px 12px; margin: 0;} form # w2b-searchform #s {padding: 6px; margin: 0; width: 235px; font-size: 14px; vertical-align: top; border: none; background: transparent;} form # w2b-searchform #sbutton {margin: 0; padding: 0; height: 30px; width: 30px; vertical-align: top ; border: none; background: transparent;} </style> <div id = "w2b-searchbox"> <form id = "w2b-searchform" action = "/ search" method = "get"><input type = "text" id = "s" name = "q" value = "Search ..." onfocus = 'if (this.value == "Search ...") {this.value = ""} 'onblur =' if (this.value == "") {this.value = "Search ...";} '/> <input type = "image" src = "http://dl.dropbox.com/ u / 106645823 / search / piksel.gif "id =" sbutton "/> </form> </div>

6. Gray-red widget

<style type = "text / css"> # w2b-searchbox {background: url (http://dl.dropbox.com/u/106645823/search/srebr.png) no-repeat scroll center center transparent; width: 307px ; height: 50px; disaply: block;} form # w2b-searchform {display: block; padding: 10px 12px; margin: 0;} form # w2b-searchform #s {padding: 6px; margin: 0; width: 235px; font-size: 14px; vertical-align: top; border: none; background: transparent;} form # w2b-searchform #sbutton {margin: 0; padding: 0; height: 30px; width: 30px; vertical-align: top ; border: none; background: transparent;} </style> <div id = "w2b-searchbox"> <form id = "w2b-searchform" action = "/ search" method = "get"><input type = "text" id = "s" name = "q" value = "Search ..." onfocus = 'if (t his.value == "Search ...") {this.value = ""} 'onblur =' if (this.value == "") {this.value = "Search ...";} '/> <input type = "image" src = "http://dl.dropbox.com/ u / 106645823 / search / piksel.gif "id =" sbutton "/> </form> </div>

7. Advanced blue widget 

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

8 : Normal blue widget

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

 

Add Stylish Custom Search Box Widget To Blogger | techno-ahmad

Go to blogger login with Gmail account 

Step 1: 

Click right side bar menu >select layout > select Add a gadget.

Step 2: 

Select the html or plus icon and enter 

Step 3: 

           Select show visible > select title and write search this blog >content past the code which you can copy of this blog post which you like .

Final Words 

 So, That was Custom search engine and we hope you've enjoyed this article and if you like then don't forget adding this search box in your blog because its full of profit. Share this article with your friends and Have a nice day!