Add ozo a stylish,premium search box for blogger

Hello Friends Today I will share a widget for blogger it search box with awesome effects So What r u waiting for??just read the below instruction to add this to your blog.

 HOW TO ADD THESE SEARCH BOXES TO BLOGGER BLOG?

I presented this tutorial with five simple steps so, carefully follow these simple steps bellow to add these search form.

1.      Go to Blogger dashboard>Layout>

2.      Now add a Html/JavaScript gadget

3.      Copy any one code's showing bellow of two designs

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

5. You are done.

If you have any question, fell free to ask by the comment form. Thanks for reading this post.