Add a beautiful stylish search box in your blogger blog.

June 19, 2013 by Sanjay Kr. Choubey Leave a Comment

Blogger gives its default search box for bloggers, Many Bloggers ignores it due to its very simple look. Since adding a stylish search box in your blogger blog is a good idea, since it will attract your readers, and your bounce rate will become low, Since readers will attract towards it and will search there queries through your entire blog posts.

Stylish search box

Know how to install a stylish email subscription box in your Blog.

Features :

This widget looks cool so it will enhance your blog looks.
you can place it where you want in your blogspot blog.
Can suit in every template
The coding is in css so it won’t effect your blog’s loading time.

How to install it :

Open your Blogger Dashboard.
Click on Layout
Click on add a gadget and place below css code in it and click on save.

<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>

Leave a Reply

error: Content is protected !!