A Beautiful CSS Search Box for Blogger Blogs

css-search-box-blogger

Add a Beautiful CSS Search Box to Your Blogger Blog

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:
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" name="q" type="text" placeholder="Type your search here" />
    <input id="submit" type="submit" value="Search" />
    </form>
You have successfully added a stylish CSS search box to your Blogger blog. Enjoy!

VIEW LIVE DEMO

Labels: , ,