Stylish Fast CSS Search Box for Blogger

Setup New Stylish Fast CSS Search Box for Blogger

It is fast in addition to easily charge on blogsite of Blogger. It is real responsive in addition to effective. It is good compaitable amongst all browsers in addition to all Blogger templates . You tin laissez passer on notice setup this search box at whatever house of your bog page.

How to setup this search box?

Follow this setps:

Dashboard >> Layout >> Add a Gadget >> HTML/JAVASCRIPT >> Paste Below Code >> Save it.

<style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9RgPmzIyAYiNkCimIzO6vGDFno9klU_eygTkKD4-Q8ugpbZz0kNnBCvOf2W6R3aKIpnNFf74pbScZri-L8vOkiXJ70Jnza8tmJjOAp6hWSajVC2QDQdO96aWvh9s8LqMzWHz7vvF-ZSn7/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px enterprise #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s relaxation 0s;
    -moz-transition: all 0.7s relaxation 0s;
    -o-transition: all 0.7s relaxation 0s;
    transition: all 0.7s relaxation 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px enterprise #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggBMEvCbPm9UsCMzDEYJpa4on70egq3CK8LTwN1j2PWO7KbTeavnOGzVAfwex-1rFoMP2G7rsffC4DBK7b4hYqJm46WqDqMrXoN5PGkEjziHFjL6nSZPY0TDzAyScFgU7DXOPq_58q07Nd/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>