Blogger's two unique Search Box Widgets

Each blog or website must have a Search Box. No type of website without search box will be full. For this, Blogger has the option to add their own search box by default, so that anyone can easily add a search box. But there is no type of design that has been placed by the blogger's own design box. In a word, it is an old model's search box. In today's post, I will discuss how to add a custom search box to Blogger. In this post, I will discuss two unique Search Box, which will be two search boxes, different designs. You can add these two search box to any type of blog. Besides, you will not have to worry about coding any type of search box. Without any modifications, just copy paste the search box into your blogger's blog.

How to add:

• First log in to your Blogger account.
• Then click on Layout from the Blogger Dashboard.
• Now click on Add Gadget from right side layout.
• Then click on HTML / JavaScript.
• Now copy the code below and paste it into the HTML / JavaScript box

[code start] <style>
#searchbox {
 display: block;
 clear: both;
 margin: 10px 0;
}
#searchbox #input {
 background: url("https://1.bp.blogspot.com/-WljTAWmd9ag/VTR2bChJy5I/AAAAAAAAEJc/S4gLEMHX8vE/s1600/Search.png") no-repeat scroll 8px center transparent !important;
 padding: 7px 15px 7px 35px !important;
 color: #444;
 text-decoration: none;
 width: 130px;
 font-size: 12px;
 font-family: "Arial Narrow",Arial,sans-serif;
 border: 1px solid #4C9ED9;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: 1px 1px 2px #CCC inset;
 -moz-box-shadow: 1px 1px 2px #CCC inset;
 box-shadow: 1px 1px 2px #CCC inset;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox #submit {
 color: #444;
 font-weight: bold;
 text-decoration: none;
 padding: 6px 15px;
 border: 1px solid #4c9ed9;
 cursor: pointer;
 width: 65px;
 height:31px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 background: #fbfbfb;
 background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
 background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
 background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>

<div id="searchbox">
 <form action="/search" autocomplete="off">
  <input id="input" name="q" type="text" size="15" placeholder="search..." />
  <input id="submit" type="submit" value="Search" />
 </form>
</div> [code end]

[code start] <style>
#searchbox {
    background: #FFFFFF;
    width: 245px;
    height: 29px;
    border: 2px solid #4c9ed9;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: none repeat scroll 0% 0% transparent;
    margin: 2px 0px 0px 20px;
    padding: 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow",Arial,sans-serif;
    font-size: 12px;
    width: 75%;
    display: inline-table;
    vertical-align: top;
    color: #000;
    border-right: 1px solid;
}
#button-submit {
    background: url('https://4.bp.blogspot.com/-SDJMUugR4A0/VTR2azxncjI/AAAAAAAAEJY/qCTew3cf78c/s1600/Blue.png') no-repeat scroll 0% 0% transparent;
    border-width: 0px;
    cursor: pointer;
    margin-left: 9px;
    margin-top: 6px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(https://4.bp.blogspot.com/-AYxiudNOvpg/VTR2a_JY6ZI/AAAAAAAAEJg/w3Ek0r0egEY/s1600/Red.png) no-repeat;
}
#button-submit:active {
    background: url(https://4.bp.blogspot.com/-AYxiudNOvpg/VTR2a_JY6ZI/AAAAAAAAEJg/w3Ek0r0egEY/s1600/Red.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="search..." />
    <input id="button-submit" type="submit" value="" />
</form> [code end]

• To change the height or width of the search box, you can change it to be the red part.
• Finally, click Save.

Admin

About Writer
Nothing to say
Follow her @ Twitter | Facebook | Google+