TUTORIAL IT: Add Stylish Custom Search Box to Blogger

Wednesday, November 11, 2015

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="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Style 5

<style>
#wc-searchblack1
{
background: #222222;
border-radius:10px;
width:280px;
}

#wc-searchblackbox1
{
padding:10px;
}

#wc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
width:178px;
font:14px verdana;
}

</style>
<div id='wc-searchblack1'>
         <form name="input" action="http://YOUR-URL/search"  method="get"  id="wc-searchblackbox1"> 
            <input name="q" id='wc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='wc-searchblacksubmit1' type='submit' value='Search'/>
         </form>
      </div>

Replace the YOUR-URL with your blog's URL

Style 6

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

<style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZCOIdDWgWO3a7B6NpUrBloE6xDlyTT7aBNBMFroRCy_e5w0k9bbdZWabNWfekdgCxlb0igBWK6fdNteV94pd1VJ8jDdHcMxm-Ii9B3b0l5xaC_o9PDuCjoT49A-8JUn6N5Bu3E1fliT4/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value=""/>
</form>
</div>

Style 8

<style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs45NGupiu0ATxF1e-zWh4h5CEokfqZIOk4KwXeilshMcyueyOXhO0zhL0hSwHlU0uaU2kkrj8enaEyOaoN-cW5p9wm56YOMi_xoGmPkLGfccgJHnGDf9NjW86ePhiRyhSiZ96SBN0o2Q/s1600/noxdo_blogspot_com_Search-icon5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value=""/>
</form>
</div>

Also Read: Customized Labels Cloud Widget For Blogger
Link to This Post Widget For Blogger
Add Yahoo Smileys In Blogger Threaded Comment

Save the gadget

Pages

Wednesday, November 11, 2015

Add Stylish Custom Search Box to Blogger

How to Add Stylish Custom Search Box To Blogger