How to Customize Beautiful the Search Bar Widget in Blogger

PUT YOUR PARSED ADSENSE CODE HERE

In this Article we discussed, how Customize Blogger search box.After seeing so many search box in bloggers. i wanted to know how customize it in following few steps.it is very importent for every blogger earch box.we know every blogger have search box.we can more traffic using this widget in blogger.so now we start how custmize it in blogger.

How to Customize Beautiful the Search Bar Widget in Blogger

How To Add These Search Boxes To Blogger Blog?

• Go to Blogger Dashboard >> Layout 
• Now add a "Html/JavaScript" gadget
• Copy any one code's showing bellow of two designs
• Save the gadget.

Search Box Code Blue

<style>
#iseosearch{
border: 1px solid #DDD;
box-sizing: border-box;
color: black;
font-family: 'Lora', serif;
font-size: 14px;
padding:9px;
width: 180px;
}
.s {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.s:hover {
box-shadow:inset 1px 1px 8px gainsboro;
}
 .s:focus {
 background-image: -webkit-linear-gradient(white,white); background-image: -moz-linear-gradient(white,white); background-image: -ms-linear-gradient(white,white);
 background-image: -o-linear-gradient(white,white);
background-color:white; outline:1px solid rgb(0, 152, 253); color:black; font-style:normal; box-shadow:inset 1px 1px 8px gainsboro; border:1px solid rgb(0, 152, 253);
}
.searchsubmit{
background:#00A7ED;
border: 1px solid #0094D2;
color: white;
cursor: pointer;
font-family: 'Droid Sans', sans-serif !important;
color: #fff;
cursor: pointer;
line-height: 19px;
padding: 8px 10px;
text-decoration: none;
}
.searchsubmit:hover{
background:#0094D2;
}
</style>
<div id='search-box'>
<form class="searchform" action="/search">
        <input id="iseosearch" class="s" name="q" x-webkit-speech="true" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search This Website ...&quot;;}" onfocus="if (this.value == &quot;Search This Website ...&quot;) {this.value = &quot;&quot;}" value="Search This Website ..." type="text">
        <input value="Search" class="searchsubmit" type="submit">
    </form>
</div>

Search Box Code Orange

<style>
#iseosearch {
    border: 1px solid rgb(221, 221, 221);
    background-color: whiteSmoke;
    color: black;
    font-family: 'Lora',serif;
    font-size: 14px;
    padding: 9px;
    width: 180px;
}
.searchsubmit:hover {
    background: url("http://4.bp.blogspot.com/-taDC-lU0_tY/UNPf1cwXFBI/AAAAAAAAHvA/64FgVp9E0Zk/s1600/gradient.png") repeat scroll 0px -33px transparent;
    text-decoration: none;
}
 .s:focus {
 background-image: -webkit-linear-gradient(white,white); background-image: -moz-linear-gradient(white,white); background-image: -ms-linear-gradient(white,white);
 background-image: -o-linear-gradient(white,white);
background-color:white; outline:1px solid rgb(0, 152, 253); color:black; font-style:normal; box-shadow:inset 1px 1px 8px gainsboro; border:1px solid rgb(0, 152, 253);
}
.searchsubmit {
    background: url("http://4.bp.blogspot.com/-taDC-lU0_tY/UNPf1cwXFBI/AAAAAAAAHvA/64FgVp9E0Zk/s1600/gradient.png") repeat scroll 0px 0px transparent;
    border: 1px solid rgb(237, 112, 43);
    color: rgb(255, 255, 255);
    cursor: pointer;
    line-height: 19px;
    padding: 8px 10px;
    text-decoration: none;
}
</style>
<form class="searchform" action="/search">
        <input class="s" name="q" id="iseosearch" x-webkit-speech="true" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search This Website ...&quot;;}" onfocus="if (this.value == &quot;Search This Website ...&quot;) {this.value = &quot;&quot;}" value="Search This Website ..." type="text">
        <input value="Search" class="searchsubmit" type="submit">
    </form>

After Paste Save It.
If you have any question, feel free to ask by the comment form. Thanks for reading this post.

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!