Home » Blogger Tutorials » Stylish Fast CSS Search Box for Blogger

Stylish Fast CSS Search Box for Blogger

Setup New Stylish Fast CSS Search Box for Blogger

It is fast and easily load on blogsite of Blogger. It is very responsive and effective. It is well compaitable with all browsers and all Blogger templates . You can setup this search box at any place 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.

#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://provishal.com/wp-content/uploads/2015/01/search-dark-1.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #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 ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
#searchbox input[type=”text”]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;

background: url(https://provishal.com/wp-content/uploads/2015/01/slider-arrow-right-1.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;

<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=” “/>

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top