Latest Information : How to add Awesome Search Box Widget for Blogspot/Blogger

Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Awesome Search Box Widget for Blogspot/Blogger

Preview

Step by Step Process to add Search Box Widget for Blogspot/Blogger ?

Step 1 :    Login to Blogger

Step 2:    Go to Dashboard >> Select the Template >> Click on Edit HTML

Step 3 :    Search for Below Code

]]></b:skin> tag

Don't Forget : 
How to add Social Network Subscription Widget for Blogspot/Blogger

How to add Social Network Subscription Widget for Blogspot/Blogger - See more at: http://www.forlatestinformation.com/2013/06/latest-information-how-to-add-social.html#sthash.Ui4tB9yH.dpuf

How to add Social Network Subscription Widget for Blogspot/Blogger - See more at: http://www.forlatestinformation.com/2013/06/latest-information-how-to-add-social.html#sthash.Ui4tB9yH.dpuf

Step 4 :    After that Replce With Following Code.

#LatestInfoSearch {
    display: block;
    clear: both;
    margin: 10px 0;
}

#LatestInfoSearch #LatestInfoinput {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTp-O1C-B5qwPCw6JrN2Rf5a8x5Vy1ZbIkJ2bSEye8TzliW7716jVkUj3I9imMcfWX-14MeaShduhTA14Zk-SfRfoKhcf-rxTkbRvVILkPsIyDN52yO5pczE45038PtwA_1KU4mItXzpGV/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
    padding: 7px 15px 7px 35px !important;
    color: #444;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #D3D3D3 !important;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}

#LatestInfoSearch #LatestInfosubmit {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    padding: 6px 15px;
    border: 1px solid #D3D3D3;
    cursor: pointer;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
    background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

Step 5 :    Save Template.

Step 6 :    Go to Layout >> Click Add Widget >> Select HTML/JavaScript

Step 7 :    Give Title as Search Here

Step 8 :    After that Copy the Below Code and Paste in Content Block

<div id="LatestInfoSearch">
    <form action="/search">
        <input type="text" name="q" id="LatestInfoinput" />
        <input type="submit" value="Search" id="LatestInfosubmit"/>
    </form>
</div>

Step 9 :    Save Widget.

Thank You.
Happy Blogging.
Write Your Comments Below.