Saturday, September 3, 2016

Add Stylish Custom Search Box to Blogger

Add Stylish Custom Search Box to Blogger


In this post, steps on how to add customized CSS3 search box to blogger blogs are given. With a custom search box in your blog, your readers both the new and returning ones can easily search for and find anything on your blog.  For blogs that have hundreds of posts, it might be very difficult for readers to find a particular post without the search box, even if they go through the archive. Also,  the analytics from searches performed on your blog lets you know what your readers really want. Other than the default blogger search box which has a dull design, you can add a customized one which is stylish and with a better design. Help your readers find what they need on your blog quickly by adding one of the styles below for the customized search box gadget for blogger.

How to Add Stylish Custom Search Box To Blogger

  • From your blogger dashboard,
  • Goto Layout.
  • Select HTML/Javascript.
  • Copy any of the codes below for your preferred style and paste in the text field . 
Also Read: Most Commented Posts Widget For Blogger With Thumbnails
                   jQuery Background Slideshow Plugin For Blogger
                   Recommended Post Slider Widget For Blogger With Share Buttons
    Style 1


    <style>
    #searchbox {
     background: url(http://4.bp.blogspot.com/-u0fEq-zSTYI/VD1gGDLy3aI/AAAAAAAAAhw/im3bcQd5wBM/s1600/search-box.png) no-repeat;
     height: 27px;
     width: 202px;
    }

    input:focus::-webkit-input-placeholder {
     color: transparent;
    }

    input:focus:-moz-placeholder {
     color: transparent;
    }

    input:focus::-moz-placeholder {
     color: transparent;
    }

    #searchbox input {
     outline: none;
    }

    #searchbox input[type="text"] {
     background: transparent;
     margin: 0px 0px 0px 12px;
     padding: 5px 0px 5px 0px;
     border-width: 0px;
     font-family: "Arial Narrow", Arial, sans-serif;
     font-size: 12px;
     font-style: italic;
     width: 77%;
     color: #828282;
     display: inline-table;
     vertical-align: top;
    }

    #button-submit {
     background: url(http://2.bp.blogspot.com/-4OxjMRukhCM/VD1gBscpzII/AAAAAAAAAhk/TUxMSv7bCzA/s1600/search-button.png) no-repeat;
     border-width: 0px;
     cursor: pointer;
     width: 30px;
     height: 25px;
    }

    #button-submit:hover {
     background: url(http://4.bp.blogspot.com/-GgNBTS_3FEA/VD1gBgm7RFI/AAAAAAAAAhg/flg6VijzW8E/s1600/search-button-hover.png) no-repeat;
    }

    #button-submit::-moz-focus-inner {
     border: 0;
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="search..." />
    <input id="button-submit" type="submit" value="" />
    </form>


    Style 2
    <style>
    #searchbox {
     background: url(http://2.bp.blogspot.com/-Un3z-hkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/s1600/search-box1.png) no-repeat;
     width: 250px;
     height: 65px;
    }

    input:focus::-webkit-input-placeholder {
    color: transparent;
    }

    input:focus:-moz-placeholder {
    color: transparent;
    }

    input:focus::-moz-placeholder {
    color: transparent;
    }

    #searchbox input {
     outline: none;
    }

    #searchbox input[type="text"] {
     background: transparent;
     padding: 5px 0px 5px 20px;
     margin: 10px 15px 0px 0px;
     border-width: 0px;
     font-family: "Brush Script MT", cursive;
     font-size: 12px;
     color: #595959;
     width: 65%;
     font-weight: bold;
     display: inline-table;
     vertical-align: top;
    }

    #button-submit {
     background: url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;
     border-width: 0px;
     cursor: pointer;
     margin-top: 10px;
     width: 19px;
     height: 25px;
    }

    #button-submit:hover {
     background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;
    }

    #button-submit:active {
     background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;
     outline: none;
    }

    #button-submit::-moz-focus-inner {
     border: 0;
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
     <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
     <input id="button-submit" type="submit" value="" />
    </form>



    Style 3



    <style>
    #searchbox {
    width: 280px;
    background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/s1600/search-box.png) no-repeat;
    }

    #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: transparent;
    border: 0px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 14px;
     color: #f2f2f2 !important;
     padding: 10px 35px 10px 20px;
     width: 220px;
    }
    #searchbox input[type="text"]:focus {
    color: #fff;
    }

    #button-submit{
    background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 40px;
    height: 50px;
    }

    #button-submit:hover {
    background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png);
    }
    </style>

    <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=" "/>
    </form>


    Style 4
    <style>
    #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(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.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;
    }

    #button-submit{
    background: url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 43px;
    height: 45px;
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size=<
    Go to link download
    

    

    

    

Posted by



at

















    


    

    

    

Labels:
,
,
,
,
,
,