Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

A Beautiful CSS Search Box for Blogger Blogs

2 min read

Lets provide visitors on your blog a very decent search box which will transform the exploration of content on your Blogger into a very beautiful look. Search boxes are one of the most important widgets on your blog which allow your visitors to find content in it comfortably. This beautiful CSS search box on your blog will benefit it in two ways:
1. It will give a fresh look to your Blogger blog
2. It will decrease bounce on your blog by attracting the attention of visitors. When they will be attracted by this search box, they will surely perform a search in it and surely click on of the results. They will keep searching for useful content and will stay long if they find what they desire for. In such a way, this search box will not only give a fresh look to your blog but will help in ranking your Blogger blog among search engines also. To add this beautiful search box to your Blogger blog, follow below simple steps:
css-search-box-blogger
1. Go to dashboard of your Blogger blog and select the blog to which you are willing to add the search box
2. In blog’s dashboard, scroll down to Layout and add a new gadget in sidebar (or wherever you want to add it) and select HTML/Java Script for the gadget
3. Now paste the below code in the field and save your gadget
<style type="text/css"><!--
    #searchboxbytobt
{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));

-moz-border-radius: 35px;
border-radius: 35px;

border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 270px;
height: 35px;
padding: 10px;

overflow: hidden;
}

#search, #submit
{
float: left;
}

#search
{
padding: 5px 9px;
height: 23px;
width: 180px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;

-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}

/* ----------------------- */

#submit
{
background: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));

-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;

border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;

-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 60px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;

text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#submit:hover
{
background: #95d788;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}

#submit:active
{
background: #95d788;
outline: none;

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

#submit::-moz-focus-inner
{
border: none;
}

/* ----------------------- */

#search::-webkit-input-placeholder {
color: #9c9c9c;
font-style: italic;
}

#search:-moz-placeholder {
color: #9c9c9c;
font-style: italic;
}

#search.placeholder {
color: #9c9c9c !important;
font-style: italic;
}

#search:focus
{
border-color: #8badb4;
background: #fff;
outline: none;
}
--></style><form id="searchboxbytobt" action="/search" method="get">    <input id="search" type="text" name="q" placeholder="Type your search here" />
<input id="submit" type="submit" value="Search" /></form></div>

You have successfully added a stylish CSS search box to your Blogger blog. Enjoy!

Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

Facebook Like Widget for Websites, WordPress and Blogger

The Facebook Like widget, which I have brought for you today is unique and coolest among its kind of widgets and plugins and you...
Rehmat Alam
1 min read

Best Free Image Hosting With Unlimited Bandwidth and Direct…

On the web, there are a lot of free image hosting websites but most of them either provide you limited storage and data transfer...
Rehmat Alam
1 min read

5 Tips to Make Effective Use of Blogger Post…

Like creating a blog without proper configuration on Blogger, writing a post using the blogspot post editor is also easy. The interface of Blogger...
Rehmat Alam
3 min read

4 Replies to “A Beautiful CSS Search Box for Blogger Blogs”

Leave a Reply

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