New Blog Online: search box

Showing posts with label search box. Show all posts

Home » Posts filed under search box

Attractive Subscribe Section + Search Box For Blogger

In this article,I am going to explain how to add more attractive Subscribe Section + Search Box to your blogger blog.This subscribe section is included Feedburner feed and Email subscriptions boxes,Twitter and Facebook boxes for your Twitter and Facebook profiles and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious) to share your articles among social networks.These social network buttons are powered by www.addthis.com.Above the subscribe section,Search box is included.You don't want to change anything in the search box code.To add this widget to your blogger sidebar without doing any modification,sidebar width must be at least 305 px. You can add this Subscribe Section + Search Box into your blog within few seconds and very easy to configure.If you like to add this widget to your blog or a website,then follow the steps given below.

1.Login to your blogger dashboard --> Design --> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Save your template.

4.Now go to Design --> Page Elements and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmvabLcXZqBW8O-B2fEs9Tig-ZPG2CKLov061p_FKWSZ39-z_9MBGVY_UXXZHFYYleGW0MmAYIPpquX9QCWEsKbVmgD-uqUksN4QfxKl1zNW1I5YSBKQrXvMvNEIFjubHLcU6LBIY7IQ08/"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwasMxTl83FBR3ABqqv51HClMBnVtEjYQ6YbhNrh0KVYqk9RBHE9N7tS_YnzeQQAcVke8bmrIwmMF7H0bvN7sbW6fZC_7rdzhVB4AxB267QwN9tFCPFU8J2LELfMfaOW3ClBhlUP-9HgKa/"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-HPZ0jc6soYbpCy0ydcXSfy1QjfgPcrpQ7oU1sxYYI5OF_qtTfiJHWK4zu6AmJVHUpbzNh__F4RaY5ku0o0EOHqQvWCdOwlOuG441C8eWGXhqQ3bVWWNBcXEJ4EZ0IoplhMIZdMg4f8YB/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE2X4PZC40ODBL-BrHfhIDSrQvJPtzqdYj3MM40z_PV7D453mXfmOObCHoxw6xUqqX_dR19jH4QI7y26Buj5TCPXsDGahtZjtZAYePr48lbrcKFEEvQAXLkEqb3fFbUv1anR8guFabUA6j/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTkadw-1wMvBU9M6DdFCOL4vw10PYczniCuzkJgUzE0SNRufZYBGr09RG45yQt_hpTAkn37EoudIj2DHAbyPE3C1BUAs05Ui9w54kAOY7Ie8jypuNSrxlvprjwolNlP439TSbkOeLLdQ/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAV3exFgUg2F4o77g7uAKzB3M28cMUscvT9KcU76C4zz9usbwUYrt49PlEyoBt_zAciLD7jmPaFb7mjKO_MOlfMs3B8Db74eMeGNX53AO201rauvEXR3u2HKFTgRS3kFE372ZxYayHSdM/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbKju9fIykpMF-tQVGSGaDB1crt5bI-ld8WcE7ibRwj9hQdJT2XlLA4UR9VULTBkcyF9zFxR68jp9W0uTFpa9NlNYfzgDS1UvJqvCQSJhZ45pjKLiCvgF2gRHllCoczaldpVNIcVAh7HU/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsYamSe-ldxH_aViGNkTy0oScKpRW9uEh94c415Co0YTd4MgBnDKNoXLqpRfITk2AKE3MNzMifsVgA6Zn4ToPIO757vIm6zJBf_sWWwYnSXGRN3BKCce07OtPdPp-ZeuQGeBphnLoBa64/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAleO2WPoDHOS1HsWXTvTccRyVevHCBAVWOEK90naSDXNZqAEmbqOsi7GUyj-lB9hvi9uJlRsnVJjzJ1ZL_NKoT8sUiYjaox5z687ZIGlw92zbvlUdQU8ZtW0lTthhSibMHXxZ4hwAMKM/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBBJM9_XYdwYun0rboe6mfjEZc2Blf5JXoByQEFmumE7ysyWKFeO4toKtg1NQcBedfXQ5wBuyrYq7fmpLLyMbYbcfCz1mM10ZIpyWNjG2-5t7p_oToidhR7AYu35o2TycUCpTja224fg/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTQYysZWjTDD4qd8bn7ZS29rPPQ_MFYBrv7p4Y6yag3SnN2FUYHaeY6yUjZGPZXuc5a-e2kLyYz33QcmxlNI5kvUmvauoX6230T7HSnXE1Y5EM3Iy6e__l5ZKdafPaCmFLpz18uZqSPw/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

NOTE : Remember to Replace,

FEEDBURNER-ID with your real Feedburner ID.(4 times).
TWITTER-USERNAME with your real Twitter username.
FACEBOOK-USERNAME with your real Facebook username.

You are done.

Beautiful CSS Search Box For Blogspot Blogs

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>

div#search { background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha_SjJY58trS8-5PnxqcZQ0I5uujflPGOLd9jTpuS2adsU0ZzeoPwBHs4_E3y7P3mD4RbEyPpwlBqvfTJbennxCJwnVCoA6pNFC5kaapF2FxlahpBCoaq2isvM7sDDCZXextToGgi4EPaB/&#39;) no-repeat scroll left top;margin: 0; float: right; width: 320px; height: 44px; }

div#search form { height: 44px; }
div#search form p { display: block; margin: 0; padding: 14px 0 0 30px; }
div#search form p input { width: 285px; border: 0; background: transparent none; color: #ffffff; }

</style>

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id='search'>
<form action="http://YOURBLOG.blogspot.com/search" id='search form' method='get'>

<p><input id='searchform' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type your search here...&quot;;}' onfocus='if (this.value == &quot;Type your search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Type your search here...'/></p>

</form>
</div>

Note : Replace "YOURBLOG" with your blog name.

You are done.Look at the picture below.

Search Box For Blogspot Blogs

How To Add Smart CSS Search Box to Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
#search {
height:34px;
width:auto;
margin-top:10px;
padding:17px 5px 10px 15px;
width:311px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-CcIlMoYsMKWakizH9S-SRV8MH6q7-5q5rwXgBKAPmkf_lgOPquujmUG3wnFYKcv8xdazRjVYwIYU2jW4AWUMEBinQYmT9QFLq-LP1qnFkQb14L8sudbaWMV6LTOZPajWDhKcSLxRHMe/);
}
#search form {
margin: 0;
padding: 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search p {
margin: 0;
font-size: 85%;
}

#s {
margin-left:0px;
float: left;
width:231px;
padding: 6px 2px 6px 5px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEileKqJidC2YxbAFRKt4FFU5YYhkDbj_gMT0mniMCsfiqQmvmrIbE2W0zn07GzUOODwZd69KXmtD6K7NO7DxP6jQZGrElEKH1zizY3eGsFvGqjOhKToM9deIXxUfFmgJdIyPFlt2w5qGD3v/s1600/sform.png) no-repeat;
border:none;
font: normal 100% &quot;Tahoma&quot;, Arial, Helvetica, sans-serif;
color:#C6C6C6;
}

#searchsubmit {
width:57px;
float: left;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7H1-ia9VMf9cMwRJ3WtqOgWjCUKqGsR5h7NUCWLheg6RMbuabO7buvNUofDaWV84wjUdUQ9CZY4Q5h3RtvTPrsSW_b1ygrtjWHmbgQXbEHg-Fm49jt822GvfDX8VvW2cdb4x8xXn7DCKx/);
border:none;
font: bold 100% &quot;century gothic&quot;, Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:28px;
margin-left:5px;
}

</style>

Note:Please host above 3 images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id='search'>
<form id="searchform" action="http://YOURBLOG.blogspot.com/search" style="display:inline;" method="get">
<input id="s" name="q" type="text" value=""/>
<input id="searchsubmit" value="" type="submit"/>
</form>
</div>

Note: Remember to replace "YOURBLOG" with your blog name.

You are done.It will look like this:

Smart CSS Search Box to Blog/Website

How To Add CSS Search Box to blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
.formbutton{
cursor:pointer;
border:solid 4px #ccc;
background:#999;
color:#fff;
font-weight:bold;
padding: 1px 2px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZh8zzt2WYa8S120L4bq_D8ythf7ZjAE8tLITMWqYuNKx8oJ4lUr4VT19lSfhu0DTXVX8eLYpKkIkuQP0GiGsMXpwbf-Mji2GXTd1p5c8b5zoO7IPjY6mAFr6x7dyhuA11RkHWrMeYawI/) repeat-x left top;
}
.formbox{
border:solid 5px #000000;
background:#ffffff;
color:#000;
font-weight:normal;
padding: 1px 2px;
}
</style>

NOTE:You can change background image,colors,borders,.. as your choice.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<form id="searchthis" action="http://YOURBLOG.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" class="formbox" maxlength="255" name="q" size="35" type="text"/>
<input id="b-searchbtn" class="formbutton" value="Search" type="submit"/>
</form>

Note:Replace "YOURBLOG" with your blog name.

You are done.It will look like this:

CSS Search Box to blogger

How To Add Multi Search Widget to Blogger

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

]]></b:skin>

3.Now add below code just above ]]></b:skin> tag.

/** css for the search box */
div#pm-search ul { /* unordered list */
margin-top: 0;
margin-right: 0;
margin-left: 0px;
margin-bottom: 5px;
padding: 0;
}
div#pm-search li { /* each list element */
list-style-type: none; /* don't edit this */
display: inline; /* don't edit this */
cursor: pointer; /* don't edit this */
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
margin-left: 0px;
text-indent: 0px;
padding: 0;
}
div#pm-search form { /* the search form */
margin: 0;
padding: 0;
}
div#pm-search-h {
display: block; /* don't edit this */
}
div#pm-search-g,
div#pm-search-b,
div#pm-search-t {
display: none; /* don't edit this */
}
div#pm-search input { /* the textbox and submit button */
background-color: transparent;
border: 1px dotted #999;
color: #999;
}
.pm-search-selected { /* which search service is currently selected */
color: #999;
border-bottom: 1px dotted #999;
}
.pm-search-unselected { /* which search services are not selected */
color: #777;
border-bottom: 1px dotted #777;
}

4.Now again Scroll down to where you see this:

</head>

5.Now add below code just above </head> tag .

6.Now save your template.

7.Go to Layout > Page Elements

8.Click on 'Add a Gadget' on the sidebar.

9.Select 'HTML/Javascript' and add the code given below and click save.

<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://YOURBLOG.blogspot.com/search" method="get">
<input id="pm-f-h" value="" name="q" size="15" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="YOURBLOG.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="YOURBLOG.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="YOURBLOG.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>

Note : Remember to replace YOURBLOG with your real blog name.

It will look like this.