Tow stylish search forms/boxes widgets for blogger

By: Unknown on 04:37

Share it Please

Tweet

In this post I will show you how to add two stylish search forms to your blogger blog. This search form widget is very easy to implement your blogger blog. So you can easily add this to your blog. One of these search form is orange and other one is blue color.  Now starting following my post see our Screenshot bellow.

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.