<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>| Blogger Tips And Tricks|Latest Tips For Bloggers</title>
	<atom:link href="https://www.bloggertipandtrick.net/tutorials/search-box/feed/" rel="self" type="application/rss+xml" />
	<link></link>
	<description>Blogger Tips And Tricks&#124;Latest Tips For Bloggers</description>
	<lastBuildDate>Wed, 19 Oct 2011 11:39:24 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>Attractive Subscribe Section + Search Box For Blogger</title>
		<link>https://www.bloggertipandtrick.net/subscribe-section-search-box-to-blogger/</link>
					<comments>https://www.bloggertipandtrick.net/subscribe-section-search-box-to-blogger/#comments</comments>
		
		<dc:creator><![CDATA[Lasantha Bandara]]></dc:creator>
		<pubDate>Sun, 03 Oct 2010 08:14:00 +0000</pubDate>
				<category><![CDATA[css]]></category>
		<category><![CDATA[feeds]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[search box]]></category>
		<guid isPermaLink="false">http://www.bloggertipandtrick.net/2010/10/attractive-subscribe-section-search-box-for-blogger.html</guid>

					<description><![CDATA[<p>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 [&#8230;]</p>
<p>The post <a href="https://www.bloggertipandtrick.net/subscribe-section-search-box-to-blogger/">Attractive Subscribe Section + Search Box For Blogger</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>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.</p>
<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://4.bp.blogspot.com/_-j7_-ccACuU/TKhG1WlEPJI/AAAAAAAACJk/UL2sy0abwxc/s1600/Attractive+Subscription+Box+and+Search+Box1.png"><img decoding="async" id="BLOGGER_PHOTO_ID_5523742825377971346" style="cursor: pointer; width: 320px; height: 237px;" src="https://4.bp.blogspot.com/_-j7_-ccACuU/TKhG1WlEPJI/AAAAAAAACJk/UL2sy0abwxc/Attractive+Subscription+Box+and+Search+Box1.png" alt="Attractive Subscribe Section + Search Box" border="0" /></a></p>
<p>1.Login to your blogger dashboard --&gt; Design --&gt; Edit HTML</p>
<p>2.Scroll down to where you see <span style="font-weight: bold; color: #ff0000;">&lt;/head&gt;</span> tag .</p>
<p>3.Copy below code and paste it <span style="color: #3333ff;">just before</span> the <span style="color: #ff0000;">&lt;/head&gt;</span> tag .</p>
<pre style="height: 300px; width: 90%; overflow: auto; border: 1px solid black;">&lt;style type="text/css"&gt;
.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% &amp;quot;Tahoma&amp;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}
&lt;/style&gt;</pre>
<p>Save your template.</p>
<p>4.Now go to Design --&gt; Page Elements and click on "Add a gadget".</p>
<p>5.Select "html/java script" and add the code given below and click save.</p>
<pre style="height: 300px; width: 90%; overflow: auto; border: 1px solid black;">&lt;div class="subbox"&gt;
&lt;div id='search' style='display:inline;'&gt;
&lt;form action='/search' id='searchform' method='get'&gt;
&lt;input id="s" name="q" onblur="if (this.value == &amp;quot;&amp;quot;) {this.value = &amp;quot;Search...&amp;quot;;}" onfocus="if (this.value == &amp;quot;Search...&amp;quot;) {this.value = &amp;quot;&amp;quot;;}" type="text" value="Search..." /&gt;
&lt;input id="searchsubmit" type="submit" value="Search" /&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;table&gt;&lt;tr&gt;
&lt;td&gt;&lt;div class="rssbox"&gt;
&lt;a href="http://feeds.feedburner.com/<span style="color: #3366ff;"><strong>FEEDBURNER-ID</strong></span>" target="_blank" rel="nofollow"&gt;&lt;img src="https://2.bp.blogspot.com/_4HKUHirY_2U/TKgvwDojM1I/AAAAAAAADgU/tBRpYkXIVho/rss.png"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /&gt;&lt;/a&gt;&lt;a href="http://feeds.feedburner.com/<span style="color: #3366ff;"><strong>FEEDBURNER-ID</strong></span>" target="_blank" rel="nofollow"&gt;RSS Feed&lt;/a&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td&gt;&lt;div class="emailsbox"&gt;
&lt;a href="http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: #0000ff;"><strong>FEEDBURNER-ID</strong></span>" target="_blank" rel="nofollow"&gt;&lt;img src="https://1.bp.blogspot.com/_4HKUHirY_2U/TKgvv1xjnUI/AAAAAAAADgE/XnHFsRwk1Js/email.png"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /&gt;&lt;/a&gt;&lt;a href="http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: #0000ff;"><strong>FEEDBURNER-ID</strong></span>" target="_blank" rel="nofollow"&gt;EMail Feed&lt;/a&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
&lt;td&gt;&lt;div class="twitterbox"&gt;
&lt;a href="http://twitter.com/<span style="color: #ff00ff;"><strong>TWITTER-USERNAME</strong></span>" target="_blank" rel="nofollow"&gt;&lt;img src="https://2.bp.blogspot.com/_4HKUHirY_2U/TKgvvhhVo_I/AAAAAAAADf8/IE38PfZs7sE/twitter.png"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /&gt;&lt;/a&gt;&lt;a href="http://twitter.com/<span style="color: #ff00ff;"><strong>TWITTER-USERNAME</strong></span>" target="_blank" rel="nofollow"&gt;Twitter&lt;/a&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td&gt;&lt;div class="facebookbox"&gt;
&lt;a href="http://www.facebook.com/<span style="color: #ff0000;"><strong>FACEBOOK-USERNAME</strong></span>" target="_blank" rel="nofollow"&gt;&lt;img src="https://2.bp.blogspot.com/_4HKUHirY_2U/TKgvv-pobaI/AAAAAAAADgM/1wAlSk8_1yY/facebook.png"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /&gt;&lt;/a&gt;&lt;a href="http://www.facebook.com/<span style="color: #ff0000;"><strong>FACEBOOK-USERNAME</strong></span>" target="_blank" rel="nofollow"&gt;Facebook&lt;/a&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
&lt;p style="display:none;" align="center"&gt;Widget by &lt;a href="https://www.bloggertipandtrick.net/" target="_blank"&gt;Blogger Tips And Tricks&lt;/a&gt;&lt;/p&gt;
&lt;div class='addthis_toolbox'&gt;
&lt;div class='custom_images'&gt;
&lt;a class='addthis_button_twitter'&gt;&lt;img alt='Twitter' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9fsSTv4I/AAAAAAAAB90/lJxosSNM6jE/twitter.png' width='32'/&gt;&lt;/a&gt;
&lt;a class='addthis_button_delicious'&gt;&lt;img alt='Delicious' height='32' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9MH_zqNI/AAAAAAAAB9E/PahHr5GN6dI/delicious.png' width='32'/&gt;&lt;/a&gt;
&lt;a class='addthis_button_facebook'&gt;&lt;img alt='Facebook' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9NTh41aI/AAAAAAAAB9U/2RkBR3wbLBY/facebook.png' width='32'/&gt;&lt;/a&gt;
&lt;a class='addthis_button_digg'&gt;&lt;img alt='Digg' height='32' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9M5a4BZI/AAAAAAAAB9M/xoWTjnPVepc/digg.png' width='32'/&gt;&lt;/a&gt;
&lt;a class='addthis_button_stumbleupon'&gt;&lt;img alt='Stumbleupon' height='32' src='http://1.bp.blogspot.com/_4HKUHirY_2U/TIb9e_Kpo-I/AAAAAAAAB9s/1WqjOIz3B_A/stumbleupon.png' width='32'/&gt;&lt;/a&gt;
&lt;a class='addthis_button_favorites'&gt;&lt;img alt='Favorites' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9eJ5RTWI/AAAAAAAAB9c/tYvdT6xgaLw/favorites.png' width='32'/&gt;&lt;/a&gt;
&lt;a class='addthis_button_more'&gt;&lt;img alt='More' height='32' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9egD8XSI/AAAAAAAAB9k/rZY5eofO2SY/more.png' width='32'/&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p><span style="font-weight: bold;">NOTE</span> : Remember to <span style="font-weight: bold; color: #ff0000;">Replace</span>,</p>
<p><span style="font-weight: bold; color: #3333ff;">FEEDBURNER-ID</span> with your real Feedburner ID.(4 times).<br />
<span style="font-weight: bold; color: #cc33cc;">TWITTER-USERNAME</span> with your real Twitter username.<br />
<span style="font-weight: bold; color: #009900;">FACEBOOK-USERNAME</span> with your real Facebook username.</p>
<p>You are done.</p>
<p>The post <a href="https://www.bloggertipandtrick.net/subscribe-section-search-box-to-blogger/">Attractive Subscribe Section + Search Box For Blogger</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.bloggertipandtrick.net/subscribe-section-search-box-to-blogger/feed/</wfw:commentRss>
			<slash:comments>19</slash:comments>
		
		
			</item>
		<item>
		<title>How To Add Smart CSS Search Box to Blogger</title>
		<link>https://www.bloggertipandtrick.net/smart-css-search-box-to-blogger/</link>
					<comments>https://www.bloggertipandtrick.net/smart-css-search-box-to-blogger/#comments</comments>
		
		<dc:creator><![CDATA[Lasantha Bandara]]></dc:creator>
		<pubDate>Wed, 18 Nov 2009 05:58:54 +0000</pubDate>
				<category><![CDATA[css]]></category>
		<category><![CDATA[search box]]></category>
		<category><![CDATA[widget]]></category>
		<guid isPermaLink="false">http://www.bloggertipandtrick.net/?p=2907</guid>

					<description><![CDATA[<p>1.Login to your blogger dashboard--&#62; layout- -&#62; Edit HTML 2.Scroll down to where you see &#60;/head&#62; tag . 3.Copy below code and paste it just before the &#60;/head&#62; tag . &#60;style type='text/css'&#62; #search { height:34px; width:auto; margin-top:10px; padding:17px 5px 10px 15px; width:311px; background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/SwN64d149xI/AAAAAAAAAM8/8HfSzziMgfs/search.png); } #search form { margin: 0; padding: 0; } #search fieldset { [&#8230;]</p>
<p>The post <a href="https://www.bloggertipandtrick.net/smart-css-search-box-to-blogger/">How To Add Smart CSS Search Box to Blogger</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>1.Login to your blogger dashboard--&gt; layout- -&gt; Edit HTML</p>
<p>2.Scroll down to where you see <span style="font-weight: bold; color: #ff0000;">&lt;/head&gt;</span> tag .</p>
<p>3.Copy below code and paste it <span style="color: #3333ff;">just before</span> the <span style="color: #ff0000;">&lt;/head&gt;</span> tag .</p>
<pre style="border: 1px solid black; overflow: auto; height: 300px; width: 90%;">&lt;style type='text/css'&gt;
#search {
height:34px;
width:auto;
margin-top:10px;
padding:17px 5px 10px 15px;
width:311px;
background:url(<span style="color: #cc33cc; font-weight: bold;">http://3.bp.blogspot.com/_4HKUHirY_2U/SwN64d149xI/AAAAAAAAAM8/8HfSzziMgfs/search.png</span>);
}
#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(<span style="font-weight: bold; color: #cc33cc;">http://3.bp.blogspot.com/_4HKUHirY_2U/SwN7CyGqi2I/AAAAAAAAANM/SkrrbPdThGU/s1600/sform.png</span>) no-repeat;
border:none;
font: normal 100% &amp;quot;Tahoma&amp;quot;, Arial, Helvetica, sans-serif;
color:#C6C6C6;
}

#searchsubmit {
width:57px;
float: left;
background:#fff url(<span style="font-weight: bold; color: #cc33cc;">http://2.bp.blogspot.com/_4HKUHirY_2U/SwN68gRqCFI/AAAAAAAAANE/HYdbueuk378/sbutton.png</span>);
border:none;
font: bold 100% &amp;quot;century gothic&amp;quot;, Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:28px;
margin-left:5px;
}

&lt;/style&gt;</pre>
<p><span style="font-weight: bold; color: #3333ff;">Note</span>:Please host above 3 images yourself.</p>
<p>4.Now save your template.</p>
<p>5.Go to Layout--&gt;Page Elements and click on "Add a gadget".</p>
<p>6.Select "html/java script" and add the code given below and click save.</p>
<pre style="border: 1px solid black; overflow: auto; height: 120px; width: 90%;">&lt;div id='search'&gt;
&lt;form id="searchform" action="http://<span style="font-weight: bold; color: #ff0000;">YOURBLOG</span>.blogspot.com/search" style="display:inline;" method="get"&gt;
&lt;input id="s" name="q" type="text" value=""/&gt;
&lt;input id="searchsubmit" value="" type="submit"/&gt;
&lt;/form&gt;
&lt;/div&gt;</pre>
<p><span style="font-weight: bold;">Note</span>: Remember to replace "<span style="font-weight: bold; color: #ff0000;">YOURBLOG</span>" with your blog name.</p>
<p>You are done.It will look like this:</p>
<div class="picturecaption left" style="width: 346px;"><img decoding="async" src="https://4.bp.blogspot.com/_-j7_-ccACuU/SwOB9e953pI/AAAAAAAABIQ/h6Zq_j6rXx0/Smart+CSS+Search+Box.png" alt="Smart CSS Search Box to Blogger" width="344" height="76" /><br />
Smart CSS Search Box to Blog/Website</div>
<p>The post <a href="https://www.bloggertipandtrick.net/smart-css-search-box-to-blogger/">How To Add Smart CSS Search Box to Blogger</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.bloggertipandtrick.net/smart-css-search-box-to-blogger/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>Beautiful CSS Search Box For Blogspot Blogs</title>
		<link>https://www.bloggertipandtrick.net/css-search-box-blogspot-blogs/</link>
					<comments>https://www.bloggertipandtrick.net/css-search-box-blogspot-blogs/#comments</comments>
		
		<dc:creator><![CDATA[Lasantha Bandara]]></dc:creator>
		<pubDate>Tue, 17 Nov 2009 05:54:18 +0000</pubDate>
				<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[search box]]></category>
		<guid isPermaLink="false">http://www.bloggertipandtrick.net/?p=2900</guid>

					<description><![CDATA[<p>1.Login to your blogger dashboard--&#62; layout- -&#62; Edit HTML 2.Scroll down to where you see &#60;/head&#62; tag . 3.Copy below code and paste it just before the &#60;/head&#62; tag . &#60;style type='text/css'&#62; div#search { background: transparent url("http://3.bp.blogspot.com/_4HKUHirY_2U/SwZCwFFG_yI/AAAAAAAAAQ0/ulhHnhO8ruI/search.gif") no-repeat scroll left top;margin: 0; width: 320px; height: 44px; } div#search form { height: 44px; } div#search form [&#8230;]</p>
<p>The post <a href="https://www.bloggertipandtrick.net/css-search-box-blogspot-blogs/">Beautiful CSS Search Box For Blogspot Blogs</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>1.Login to your blogger dashboard--&gt; layout- -&gt; Edit HTML</p>
<p>2.Scroll down to where you see <span style="font-weight: bold; color: #ff0000;">&lt;/head&gt;</span> tag .</p>
<p>3.Copy below code and paste it <span style="color: #3333ff;">just before</span> the <span style="color: #ff0000;">&lt;/head&gt;</span> tag .</p>
<pre style="border: 1px solid black; overflow: auto; height: 180px; width: 90%;">&lt;style type='text/css'&gt;
div#search { background: transparent url("http://3.bp.blogspot.com/_4HKUHirY_2U/SwZCwFFG_yI/AAAAAAAAAQ0/ulhHnhO8ruI/search.gif") no-repeat scroll left top;margin: 0; 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; }
&lt;/style&gt;</pre>
<p>4.Now save your template.</p>
<p>5.Go to Layout--&gt;Page Elements and click on "Add a gadget".</p>
<p>6.Select "html/java script" and add the code given below and click save.</p>
<pre style="border: 1px solid black; overflow: auto; height: 150px; width: 90%;">&lt;div id='search'&gt;
&lt;form action="http://<span style="font-weight: bold; color: #ff0000;">YOURBLOG</span>.blogspot.com/search" id='search form' method='get'&gt;

&lt;p&gt;&lt;input id='searchform' name='q' onblur='if (this.value == &amp;quot;&amp;quot;) {this.value = &amp;quot;Type your search here...&amp;quot;;}' onfocus='if (this.value == &amp;quot;Type your search here...&amp;quot;) {this.value = &amp;quot;&amp;quot;}' type='text' value='Type your search here...'/&gt;&lt;/p&gt;

&lt;/form&gt;
&lt;/div&gt;</pre>
<p><span style="font-weight: bold;">Note :</span> <span style="color: #3333ff;">Replace</span> "<span style="color: #ff0000;">YOURBLOG</span>" with your blog name.</p>
<p>You are done.Look at the picture below.</p>
<div class="picturecaption left" style="width: 325px;"><img decoding="async" src="https://3.bp.blogspot.com/_-j7_-ccACuU/SwZFLOBCdwI/AAAAAAAABJQ/8B1w_8EicQk/Beautiful+search+box+for+blogspot.png" alt="Search Box For Blogspot Blogs" width="323" height="55" /><br />
Search Box For Blogspot Blogs</div>
<p>The post <a href="https://www.bloggertipandtrick.net/css-search-box-blogspot-blogs/">Beautiful CSS Search Box For Blogspot Blogs</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.bloggertipandtrick.net/css-search-box-blogspot-blogs/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
			</item>
		<item>
		<title>How To Add CSS Search Box to blogger</title>
		<link>https://www.bloggertipandtrick.net/how-to-add-css-search-box/</link>
					<comments>https://www.bloggertipandtrick.net/how-to-add-css-search-box/#respond</comments>
		
		<dc:creator><![CDATA[Lasantha Bandara]]></dc:creator>
		<pubDate>Sun, 15 Nov 2009 09:41:37 +0000</pubDate>
				<category><![CDATA[css]]></category>
		<category><![CDATA[search box]]></category>
		<category><![CDATA[widget]]></category>
		<guid isPermaLink="false">http://www.bloggertipandtrick.net/?p=2933</guid>

					<description><![CDATA[<p>1.Login to your blogger dashboard--&#62; layout- -&#62; Edit HTML 2.Scroll down to where you see &#60;/head&#62; tag . 3.Copy below code and paste it just before the &#60;/head&#62; tag . &#60;style type='text/css'&#62; .formbutton{ cursor:pointer; border:solid 4px #ccc; background:#999; color:#fff; font-weight:bold; padding: 1px 2px; background:url(http://3.bp.blogspot.com/_ar9PeTUrwMY/SuunWOFRlRI/AAAAAAAAAzo/sxOoBETSuD8/topnav_stretch.gif) repeat-x left top; } .formbox{ border:solid 5px #000000; background:#ffffff; color:#000; font-weight:normal; [&#8230;]</p>
<p>The post <a href="https://www.bloggertipandtrick.net/how-to-add-css-search-box/">How To Add CSS Search Box to blogger</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>1.Login to your blogger dashboard--&gt; layout- -&gt; Edit HTML</p>
<p>2.Scroll down to where you see <span style="font-weight: bold; color: #ff0000;">&lt;/head&gt;</span> tag .</p>
<p>3.Copy below code and paste it <span style="color: #3333ff;">just before</span> the <span style="color: #ff0000;">&lt;/head&gt;</span> tag .</p>
<pre style="border: 1px solid black; overflow: auto; height: 200px; width: 90%;">&lt;style type='text/css'&gt;
.formbutton{
cursor:pointer;
border:solid 4px #ccc;
background:#999;
color:#fff;
font-weight:bold;
padding: 1px 2px;
background:url(<span style="font-weight: bold; color: #cc33cc;">http://3.bp.blogspot.com/_ar9PeTUrwMY/SuunWOFRlRI/AAAAAAAAAzo/sxOoBETSuD8/topnav_stretch.gif</span>) repeat-x left top;
}
.formbox{
border:solid 5px #000000;
background:#ffffff;
color:#000;
font-weight:normal;
padding: 1px 2px;
}
&lt;/style&gt;</pre>
<p><span style="font-weight: bold;">NOTE</span>:You can change background image,colors,borders,.. as your choice.</p>
<p>4.Now save your template.</p>
<p>5.Go to Layout--&gt;Page Elements and click on "Add a gadget".</p>
<p>6.Select "html/java script" and add the code given below and click save.</p>
<pre style="border: 1px solid black; overflow: auto; height: 100px; width: 90%;">&lt;form id="searchthis" action="http://<span style="font-weight: bold; color: #ff0000;">YOURBLOG</span>.blogspot.com/search" style="display:inline;" method="get"&gt;
&lt;input id="b-query" class="formbox" maxlength="255" name="q" size="35" type="text"/&gt;
&lt;input id="b-searchbtn" class="formbutton" value="Search" type="submit"/&gt;
&lt;/form&gt;</pre>
<p><span style="font-weight: bold; color: #3333ff;">Note:</span>Replace "<span style="font-weight: bold; color: #ff0000;">YOURBLOG</span>" with your blog name.</p>
<p>You are done.It will look like this:</p>
<div class="picturecaption left" style="width: 334px;"><img decoding="async" src="https://1.bp.blogspot.com/_-j7_-ccACuU/SwC1mA2iGBI/AAAAAAAABHw/cUpY13dLSQs/css+search+box.png" alt="CSS Search Box" width="333" height="67" /><br />
CSS Search Box to blogger</div>
<p>The post <a href="https://www.bloggertipandtrick.net/how-to-add-css-search-box/">How To Add CSS Search Box to blogger</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.bloggertipandtrick.net/how-to-add-css-search-box/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How To Add Multi Search Widget to Blogger</title>
		<link>https://www.bloggertipandtrick.net/how-to-add-multi-search-widget-to/</link>
					<comments>https://www.bloggertipandtrick.net/how-to-add-multi-search-widget-to/#respond</comments>
		
		<dc:creator><![CDATA[Lasantha Bandara]]></dc:creator>
		<pubDate>Tue, 30 Jun 2009 03:04:00 +0000</pubDate>
				<category><![CDATA[gadget]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[search box]]></category>
		<category><![CDATA[widget]]></category>
		<guid isPermaLink="false">http://www.bloggertipandtrick.net/2009/06/how-to-add-multi-search-widget-to-blogger.html</guid>

					<description><![CDATA[<p>1.Log in to your dashboard--> layout- -> Edit HTML 2.Scroll down to where you see this: ]]&#62;&#60;/b:skin&#62; 3.Now add below code just above ]]&#62;&#60;/b:skin&#62; 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 [&#8230;]</p>
<p>The post <a href="https://www.bloggertipandtrick.net/how-to-add-multi-search-widget-to/">How To Add Multi Search Widget to Blogger</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>1.Log in to your dashboard--> layout- -> Edit HTML</p>
<p>2.Scroll down to where you see this:</p>
<p><center></p>
<table bgcolor="#cccd94" border="0" width="400">
<tbody>
<tr>
<td><center>]]&gt;&lt;/b:skin&gt;</center></td>
</tr>
</tbody>
</table>
<p></center></p>
<p>3.Now add below code <span style="color: rgb(51, 51, 255);">just above</span> <span style="font-weight: bold; color: rgb(255, 0, 0);">]]&gt;&lt;/b:skin&gt;</span>  tag.</p>
<p><center></p>
<table bgcolor="#cccd94" border="0" width="400">
<tbody>
<tr>
<td><center>/** css for the search box */<br />div#pm-search ul { /* unordered list */<br />margin-top: 0;<br />margin-right: 0;<br />margin-left: 0px;<br />margin-bottom: 5px;<br />padding: 0;<br />}<br />div#pm-search li { /* each list element */<br />list-style-type: none; /* don't edit this */<br />display: inline; /* don't edit this */<br />cursor: pointer; /* don't edit this */<br />margin-top: 0;<br />margin-bottom: 0;<br />margin-right: 5px;<br />margin-left: 0px;<br />text-indent: 0px;<br />padding: 0;<br />}<br />div#pm-search form { /* the search form */<br />margin: 0;<br />padding: 0;<br />}<br />div#pm-search-h {<br />display: block; /* don't edit this */<br />}<br />div#pm-search-g,<br />div#pm-search-b,<br />div#pm-search-t {<br />display: none; /* don't edit this */<br />}<br />div#pm-search input { /* the textbox and submit button */<br />background-color: transparent;<br />border: 1px dotted #999;<br />color: #999;<br />}<br />.pm-search-selected { /* which search service is currently selected */<br />color: #999;<br />border-bottom: 1px dotted #999;<br />}<br />.pm-search-unselected { /* which search services are not selected */<br />color: #777;<br />border-bottom: 1px dotted #777;<br />}</center></td>
</tr>
</tbody>
</table>
<p></center></p>
<p>4.Now again Scroll down to where you see this:</p>
<p><center></p>
<table bgcolor="#cccd94" border="0" width="400">
<tbody>
<tr>
<td><center>&lt;/head&gt;</center></td>
</tr>
</tbody>
</table>
<p></center></p>
<p>5.Now add below code <span style="color: rgb(51, 51, 255);">just above</span>  <span style="font-weight: bold; color: rgb(255, 0, 0);">&lt;/head&gt;</span> tag .</p>
<p>6.Now save your template.</p>
<p>7.Go to Layout > Page Elements</p>
<p>8.Click on 'Add a Gadget' on the sidebar.</p>
<p>9.Select 'HTML/Javascript' and add the code given below and click save.</p>
<p><center></p>
<table bgcolor="#cccd94" border="0" width="400">
<tbody>
<tr>
<td><center>&lt;div id="pm-search"&gt;<br />&lt;ul&gt;<br />&lt;li id="li-h" class="pm-search-selected" onclick="selectH()"&gt;here&lt;/li&gt;&lt;li id="li-g" class="pm-search-unselected" onclick="selectG()"&gt;google&lt;/li&gt;&lt;li id="li-b" class="pm-search-unselected" onclick="selectB()"&gt;blogger&lt;/li&gt;&lt;li id="li-t" class="pm-search-unselected" onclick="selectT()"&gt;technorati&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;div id="pm-search-h"&gt;<br />&lt;form action="http://YOURBLOG.blogspot.com/search" method="get"&gt;<br />&lt;input id="pm-f-h" value="" name="q" size="15" type="text"/&gt;<br />&lt;input value="Search" type="submit"/&gt;<br />&lt;/form&gt;<br />&lt;/div&gt;<br />&lt;div id="pm-search-g"&gt;<br />&lt;form action="http://blogsearch.google.com/blogsearch" method="get"&gt;<br />&lt;input id="pm-f-g" value="" name="as_q" size="15" type="text"/&gt;<br />&lt;input value="Search" type="submit"/&gt;<br />&lt;input value="YOURBLOG.blogspot.com" name="bl_url" type="hidden"/&gt;<br />&lt;/form&gt;<br />&lt;/div&gt;<br />&lt;div id="pm-search-b"&gt;<br />&lt;form action="http://search.blogger.com/" method="get"&gt;<br />&lt;input id="pm-f-b" value="" name="as_q" size="15" type="text"/&gt;<br />&lt;input value="Search" type="submit"/&gt;<br />&lt;input value="YOURBLOG.blogspot.com" name="bl_url" type="hidden"/&gt;<br />&lt;/form&gt;<br />&lt;/div&gt;<br />&lt;div id="pm-search-t"&gt;<br />&lt;form action="http://www.technorati.com/search.php" method="post"&gt;<br />&lt;input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/&gt;<br />&lt;input value="Search" type="submit"/&gt;<br />&lt;input value="searchlet" name="sub" type="hidden"/&gt;<br />&lt;input value="YOURBLOG.blogspot.com" name="from" type="hidden"/&gt;<br />&lt;input value="n" name="authority" type="hidden"/&gt;<br />&lt;input value="n" name="language" type="hidden"/&gt;<br />&lt;/form&gt;<br />&lt;/div&gt;<br />&lt;/div&gt;</center></td>
</tr>
</tbody>
</table>
<p></center></p>
<p>Note : Remember to <span style="color: rgb(51, 51, 255);">replace</span> <span style="font-weight: bold; color: rgb(255, 0, 0);">YOURBLOG</span> with your real blog name.</p>
<p>It will look like this.</p>
<p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://1.bp.blogspot.com/_-j7_-ccACuU/Skl9QRhMMlI/AAAAAAAAAj4/Do1dvfZV83c/s1600-h/search11.png"><img decoding="async" style="cursor: pointer; width: 350px; height: 84px;" src="https://1.bp.blogspot.com/_-j7_-ccACuU/Skl9QRhMMlI/AAAAAAAAAj4/Do1dvfZV83c/s400/search11.png" alt="" id="BLOGGER_PHOTO_ID_5352947350640538194" border="0" /></a></p>
<p><a href="http://purplemoggy.blogspot.com/">Source</a></p>
<p>The post <a href="https://www.bloggertipandtrick.net/how-to-add-multi-search-widget-to/">How To Add Multi Search Widget to Blogger</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.bloggertipandtrick.net/how-to-add-multi-search-widget-to/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How To Add Google Backlinks Checker</title>
		<link>https://www.bloggertipandtrick.net/how-to-add-google-backlinks-checker/</link>
					<comments>https://www.bloggertipandtrick.net/how-to-add-google-backlinks-checker/#respond</comments>
		
		<dc:creator><![CDATA[Lasantha Bandara]]></dc:creator>
		<pubDate>Fri, 05 Jun 2009 08:55:00 +0000</pubDate>
				<category><![CDATA[gadget]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[search box]]></category>
		<category><![CDATA[widget]]></category>
		<guid isPermaLink="false">http://www.bloggertipandtrick.net/2009/06/how-to-add-google-backlinks-checker.html</guid>

					<description><![CDATA[<p>1.Login to your dashboard--> layout- ->Page Elements 2.Click on 'Add a Gadget' on the sidebar. 3.Select 'HTML/Javascript' and add the code given below and click save. &#60;form method="get" action="http://www.google.com/search" target="_blank" rel="nofollow"&#62;&#60;input name="q" value="link:" maxlength="255" size="40" type="text"&#62;&#60;input value="Google Backlinks" type="submit"&#62;&#60;input value="en" name="hl" type="hidden"&#62;&#60;/form&#62; It will look like this. Note : To check google backlinks,Enter URL with [&#8230;]</p>
<p>The post <a href="https://www.bloggertipandtrick.net/how-to-add-google-backlinks-checker/">How To Add Google Backlinks Checker</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>1.Login to your dashboard--> layout- ->Page Elements</p>
<p>2.Click on 'Add a Gadget' on the sidebar.</p>
<p>3.Select 'HTML/Javascript' and add the code given below and click save.</p>
<p><center></p>
<table width="400" border="0" bgcolor="#cccd94">
<tbody>
<tr>
<td><center>&lt;form method="get" action="http://www.google.com/search" target="_blank" rel="nofollow"&gt;&lt;input name="q" value="link:" maxlength="255" size="40" type="text"&gt;&lt;input value="Google Backlinks" type="submit"&gt;&lt;input value="en" name="hl" type="hidden"&gt;&lt;/form&gt;<br /></center></td>
</tr>
</tbody>
</table>
<p></center></p>
<p>It will look like this.</p>
<form method="get" action="http://www.google.com/search" target="_blank" rel="nofollow"><input name="q" value="link:http://bloggertipandtrick.blogspot.com/" maxlength="255" size="40" type="text"><input value="Google Backlinks" type="submit"><input value="en" name="hl" type="hidden"></form>
<p><span style="font-weight:bold;">Note :</span> To check google  backlinks,Enter URL with <span style="font-weight:bold;">http://</span> after the word <span style="font-weight:bold;">link:</span></p>
<p>Now you are done.</p>
<p>The post <a href="https://www.bloggertipandtrick.net/how-to-add-google-backlinks-checker/">How To Add Google Backlinks Checker</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.bloggertipandtrick.net/how-to-add-google-backlinks-checker/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How To Add Google Index Pages Checker</title>
		<link>https://www.bloggertipandtrick.net/how-to-add-google-index-pages-checker/</link>
					<comments>https://www.bloggertipandtrick.net/how-to-add-google-index-pages-checker/#respond</comments>
		
		<dc:creator><![CDATA[Lasantha Bandara]]></dc:creator>
		<pubDate>Fri, 05 Jun 2009 08:19:00 +0000</pubDate>
				<category><![CDATA[gadget]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[search box]]></category>
		<category><![CDATA[widget]]></category>
		<guid isPermaLink="false">http://www.bloggertipandtrick.net/2009/06/how-to-add-google-index-pages-checker.html</guid>

					<description><![CDATA[<p>1.Login to your dashboard--> layout- ->Page Elements 2.Click on 'Add a Gadget' on the sidebar. 3.Select 'HTML/Javascript' and add the code given below and click save. &#60;form method="get" action="http://www.google.com/search" target="_blank" rel="nofollow"&#62;&#60;input name="q" value="site:" maxlength="255" size="40" type="text"&#62;&#60;input value="Google Index" type="submit"&#62;&#60;input value="en" name="hl" type="hidden"&#62;&#60;/form&#62; It will look like this. Note : To check google index pages ,Enter [&#8230;]</p>
<p>The post <a href="https://www.bloggertipandtrick.net/how-to-add-google-index-pages-checker/">How To Add Google Index Pages Checker</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>1.Login to your dashboard--> layout- ->Page Elements</p>
<p>2.Click on 'Add a Gadget' on the sidebar.</p>
<p>3.Select 'HTML/Javascript' and add the code given below and click save.</p>
<p><center></p>
<table width="400" border="0" bgcolor="#cccd94">
<tbody>
<tr>
<td><center>&lt;form method="get" action="http://www.google.com/search" target="_blank" rel="nofollow"&gt;&lt;input name="q" value="site:" maxlength="255" size="40" type="text"&gt;&lt;input value="Google Index" type="submit"&gt;&lt;input value="en" name="hl" type="hidden"&gt;&lt;/form&gt;<br /></center></td>
</tr>
</tbody>
</table>
<p></center></p>
<p>It will look like this.</p>
<form method="get" action="http://www.google.com/search" target="_blank" rel="nofollow"><input name="q" value="site:http://bloggertipandtrick.blogspot.com/" maxlength="255" size="40" type="text"><input value="Google Index" type="submit"><input value="en" name="hl" type="hidden"></form>
<p><span style="font-weight:bold;">Note :</span> To check google index pages ,Enter URL with <span style="font-weight:bold;">http://</span> after the word <span style="font-weight:bold;">site:</span></p>
<p><span style="font-weight:bold;"></span></p>
<p>The post <a href="https://www.bloggertipandtrick.net/how-to-add-google-index-pages-checker/">How To Add Google Index Pages Checker</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.bloggertipandtrick.net/how-to-add-google-index-pages-checker/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How To Add Search Box to Search in Your Blogsite(Website)</title>
		<link>https://www.bloggertipandtrick.net/how-to-add-search-box-to-search-in-your/</link>
					<comments>https://www.bloggertipandtrick.net/how-to-add-search-box-to-search-in-your/#comments</comments>
		
		<dc:creator><![CDATA[Lasantha Bandara]]></dc:creator>
		<pubDate>Sun, 05 Apr 2009 09:24:00 +0000</pubDate>
				<category><![CDATA[button]]></category>
		<category><![CDATA[change template]]></category>
		<category><![CDATA[search box]]></category>
		<category><![CDATA[text boxes]]></category>
		<category><![CDATA[widget]]></category>
		<guid isPermaLink="false">http://www.bloggertipandtrick.net/2009/04/how-to-add-search-box-to-search-in-your-blogsitewebsite.html</guid>

					<description><![CDATA[<p>1.Login to your blogger account.Go Layout --> Add a Gadget --> Select “HTML/JavaScript”. 2.Copy below code and paste it.Click save and refresh your site. &#60;p align="left"&#62;&#60;form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get"&#62;&#60;strong&#62;NAME OF YOUR BLOG&#60;br/&#62;&#60;/strong&#62;&#60;input id="b-query" maxlength="255" name="q" size="20" type="text"/&#62;&#60;input id="b-searchbtn" value="Search" type="submit"/&#62;&#60;/form&#62;&#60;/p&#62; Note:Remember to replace "YOUR BLOG URL" and "NAME OF YOUR BLOG" with [&#8230;]</p>
<p>The post <a href="https://www.bloggertipandtrick.net/how-to-add-search-box-to-search-in-your/">How To Add Search Box to Search in Your Blogsite(Website)</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>1.Login  to  your blogger account.Go Layout --> Add a Gadget --> Select “HTML/JavaScript”.</p>
<p>2.Copy below code and paste it.Click save and refresh your site.</p>
<p><span style="color: rgb(255, 0, 0);">&lt;p align="left"&gt;</span><br /><span style="color: rgb(255, 0, 0);">&lt;form id="searchthis" action="<span style="color: rgb(51, 102, 255);">YOUR BLOG URL</span>/search" style="display:inline;" method="get"&gt;</span><br /><span style="color: rgb(255, 0, 0);">&lt;strong&gt;<span style="color: rgb(51, 102, 255);">NAME OF YOUR BLOG</span>&lt;br/&gt;&lt;/strong&gt;</span><br /><span style="color: rgb(255, 0, 0);">&lt;input id="b-query" maxlength="255" name="q" <span style="color: rgb(51, 102, 255);">size="20"</span> type="text"/&gt;</span><br /><span style="color: rgb(255, 0, 0);">&lt;input id="b-searchbtn" <span style="color: rgb(51, 102, 255);">value="Search"</span> type="submit"/&gt;</span><br /><span style="color: rgb(255, 0, 0);">&lt;/form&gt;&lt;/p&gt;</span></p>
<p><span style="font-weight: bold; color: rgb(0, 0, 0);">Note:</span>Remember to replace <span style="color: rgb(255, 0, 0);"><span style="color: rgb(51, 102, 255);"><span style="color: rgb(0, 0, 0);">"</span>YOUR BLOG URL<span style="color: rgb(0, 0, 0);">"</span> <span style="color: rgb(0, 0, 0);">and</span>  </span></span><span style="color: rgb(255, 0, 0);"><span style="color: rgb(51, 102, 255);"><span style="color: rgb(0, 0, 0);">"</span>NAME OF YOUR BLOG</span></span>" with your<br />      details.<br />      If you want to change the <span style="color: rgb(51, 102, 255);">size</span> of your search box than just change the value 20 to 35(any<br />      value you like to  get a bigger search box.<br />      You can also change the “Search” button to say, “Hit” or “Go” or "Enter" or "Read more",<br />       by changing the <span style="color: rgb(51, 102, 255);">Value</span> in the above html code.</p>
<p>3.You can see search box like below one.</p>
<p>Blogger Tips And Tricks</p>
<form id="searchthis" action="http://bloggertipandtrick.blogspot.com/search" style="display: inline;" method="get"><strong></strong><br /><input id="b-query" maxlength="255" name="q" size="20" type="text"><br /><input id="b-searchbtn" value="Search" type="submit"><br /></form>
</p>
<p>You can also remove the button "search" from the above search box and place an image for better look. The html code will be:</p>
<p><span style="color: rgb(255, 0, 0);">&lt;p align="left"&gt;</span><br /><span style="color: rgb(255, 0, 0);">&lt;form id="searchthis" action="<span style="color: rgb(51, 102, 255);">YOUR BLOG URL</span>/search" style="display:inline;" method="get"&gt;</span><br /><span style="color: rgb(255, 0, 0);">&lt;strong&gt;<span style="color: rgb(51, 102, 255);">NAME OF YOUR BLOG</span>&lt;br/&gt;&lt;/strong&gt;</span><br /><span style="color: rgb(255, 0, 0);">&lt;input id="b-query" maxlength="255" name="q" <span style="color: rgb(51, 102, 255);">size</span>="20" type="text"/&gt;</span><br /><span style="color: rgb(255, 0, 0);">&lt;input id="b-searchbtn" type="image" src="<span style="color: rgb(51, 102, 255);">IMAGE URL</span>" <span style="color: rgb(51, 102, 255);">align</span>="top"/&gt;</span><br /><span style="color: rgb(255, 0, 0);">&lt;/form&gt;&lt;/p&gt;</span></p>
<p>You can see search box like below one.</p>
<p align="left"></p>
<form id="searchthis" action="http://bloggertipandtrick.blogspot.com//search" style="display: inline;" method="get"><strong>Blogger Tips And Tricks<br /></strong><br /><input id="b-query" maxlength="255" name="q" size="20" type="text"><br /><input id="b-searchbtn" src="http://i626.photobucket.com/albums/tt346/wam8387/bloggertipsbutton1.png" align="top" type="image"></form>
<p>The post <a href="https://www.bloggertipandtrick.net/how-to-add-search-box-to-search-in-your/">How To Add Search Box to Search in Your Blogsite(Website)</a> appeared first on <a href="https://www.bloggertipandtrick.net">Blogger Tips And Tricks|Latest Tips For Bloggers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.bloggertipandtrick.net/how-to-add-search-box-to-search-in-your/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
	</channel>
</rss>
