How to add a search box to your blogger,as default template doesn’t provide any search codes or search box in your template so as readers can search of in your blog or web from your blog.There are many methods of adding search box to your blog at different places you want and different types of codes for search which you want to be done in our blog.Now i will explain where to add these codes and what codes to add to make a seach box in your blog.
Lets first of all start with the search codes which you need to add in your blog. The codes are below:-
First
Change the text in red to any text like search or hit you want to display in button to hit the search.
Your search box will appear like this below.
Second
If you want to add some styling like this new sample below:-
Use these codes
<input id=”search-box” name=”q” size=”25″ type=”text” style=”background: #ccccff; border: 2px solid #000066″/><input id=”search-btn” value=”Search” type=”submit” style=”background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;”/></form>
Edit the colors or styling in red in above codes to change the styling of search box to adjust in your template.
Third
Now if you want to add image in place of search button like below:-
Use these codes:-
<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/><input id="search-btn" value="Search" type="image" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16×16/search_magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>
Change the image url in red above with the url of the image you want to use.and hope you would have no problem in using any of the codes.
Now How To place search Box at different places in blogger blog:-
To Place it in sidebar:-
Under Template->Page Elements tab, click “Add a Page Element†at the place where you want your search box to appear.
Select HTML/JavaScript and add the above codes.
If you want to place search box in header read this tuorial Embed search Box In Blogger Header.
I hope you will love this tutorial.
VERY AWESOME DUDE THX AND MORE POWER!
its very good
and its working also
thank you very much
Thanks for the tutorial ..
Very easy! Thank you!
Cheers for this!
So helpful! Thank you…
thx. for the excellent tutorial!!!
Thanks this added the final touch
I have one doubt. i created 10 blogs in blogspot. in these blogs one as home page other as sub pages, But problem is as these are separate blogs, each one has their own search. So can u provide me search box code, that has capability of search more than one blog.
like when user search in home blog. it has to search in remaining all 9 blogs that i hav created. is it possible? Please suggest me
This is very helpfull…especially how to change the style (i didnt know this)…but i have a question, if you could help me, i would really appreciate it… how can i position the search bar to whichever place/position of the blogger i want…i mean, is there a code, that defines the position of the search bar?
This is my blog: http://universumest.blogspot.com/
this is where i want to place the search bar: http://i463.photobucket.com/albums/qq358/raidenjunior/dsfsdfs.jpg
Thank you very much in advance!!!
Thanks so much for this! I've been looking for a way to do this for a while and yours was simple and easy. A few other codes did not work (from other sites) maybe because I am using tumblr…so I was happy to find this. Thanks again! –Grace
Awosome ..thnx
its not working in my blog, starting this code working properly but its not working. only one post result shown another results not shown. you can check also my blog postings in i think 170 posts. http://www.hollywood-boxoffice.blogspot.com
its not working on my site
thanks….
Hi Anshul,
I have a default search box in my blogger template. And after changing to a custom domain search is now totally dis functional. Can you help me in this. I know this is a bit off topic, but still if you could help me, it would have been really helpful.
@manuel i saw your codes.See this line
input class='textfield' name='q' size='24' type='text' value=''
make like this
input class='textfield' name='q' size='24' type='text' value='' id='s'
Its working but can I adjust the box height? I can only resize its width, not the height. Please reply fast!
@moderator see the second search code i have told that is blue color seach box.
And now see below codes what i have done is added height property only and now can increade heignt.
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066;height:30px;"/><input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/></form>
Thanks anshul! It works perfectly. One more thing, I have added the search box on my header right next to RSS feed links (see for yourself at http://unitybond.blogspot.com) and made the background transparent.
Here's the prob, when I make the background transparent, the words inside the search box can't really be seen (cause its black). Is there any chance that I change just the font color?
@moderator i can't see any search box in your template but any how i saw it and understood your problem.Just as how i added height:30px; add this propery also there color:#fff; then it will become white.
Anshul, really sorry to trouble but whenever I try to add the code u said above, it keep showing Attribute name "color:" associated with an element type "input" must be followed by the ' = ' character. and also Open quote is expected for attribute "{1}" associated with an element type "color:".
Would u mind help me to edit the code? I just want the font in white while the background transparent. I can't put the embed codes here cause your blogger comment don't allow it.
Thanks a billion! By the way, my McAfee SiteAdvisor show me warnings about your site linked to Ziddu.com which poses browser breach. Hope u can look around.
Mine doesn't work. I recently got a custom domain name and it stopped working. Could it have something to do with that? Is there a way I could fix it?
I'm having the same problem, mine doesn't work. I recently got a custom domain, could it have something to do with that? I never had a problem before. How can I fix this? http://www.skinnytaste.com
@moderator you have to add it in style so add it just after height:30px;color:#fff; like this then it will accept.
@gina ya as you switched to domain so urls chnaged.So when they will all be indexed by google then will show up in search results.
Hi,
I have one problem with my search box – when I search for something it only shows results from posts on my front page, like the eight latest posts.
Do you have any idea what that's about?
Thank you.
@linus you have added google custom search i cant say may be you would have made some settings while making it.
Hi, yeah I know I got the Google custom search now. That one works ok.
But the question was about your search box code.
I removed the search box I got from your site just because of the problem I mentioned – that it only showed posts from the front page.
Hi Anshul, is it possible to have the search my blog codes that shows the names and few sentences of the posts instead of showing whole posts? Cause of the new blogger arrangement, i can only show 1-2 posts per page which defeats the purpose of putting a seach my blog function! Thanks! (:
@linus mine codes are fine as every one uses same codes and all templates have search inbuild like this.
@zoe ya i think for this if you you will show only post title on label pages hack may provide you solution for this.You can find for it in my blog.
Thanks Anshul for the quick revert! You mean you have the codes for "search this blog" that displays just titled and a few words of each post instead of the current whole posts reflected?
Hey Great post man thank u very much.
If I want the header of the search box, how I write the code.
The header like " Search:â–¡Go!
â–¡=search box
change this value n codes to any value="Search"
Just replace search with go
I have a problem with custom domain. Search box does'nt work. Any ideas? http://www.patiks.lt
Thank you! I kept finding directions on how to do it for the new templates style, but I'm using a Classic Template style, so this was perfect.
buddy this not helping me !
as this or any other search box of your tutorial is not able to search for the specific or any posts in my blog , u can check for ur self after visiting my blog !
please help !
the problem occured after i changed my blog url from http://swaranisking.blogspot.com to http://goooglehacker.blogspot.com, now even the default search box which blogger provides and which is the best which i like is not working so please help me !
will be waiting for ur answer !
thanks !
@hacker ya u changed url so it will take ime unless all your posts on new name are indexed well then it will start searching.It can take months.
Thanks, just whwat I needed!
THANX SOO MUCH THANK YOU:D
What an elegant tutorial! Everything worked – not what I can say about a lot of other instructions on the web 🙂 Thank you for sharing your expertise.
having some problem, when i type some keyword, it works but it only shows the recent posts i made with the relevant keyword that i'm searching.. but the earlier posts are not shown although it has the same keywords as what i'm searching for…
i really need this search plug in as my blog have many post under 1 label.
Can you fix this?
btw, my site: http://malaysiatvtube.blogspot.com
@blogmaster ya after search all post containing that keyword will come in recent posts order.And ya when sometimes post becomes unindexed from google it didnt comes in search results.
anshul plz help
when i search any thing in my blog through your search code then it says that
"No posts matching the query: themes. Show all posts"
this is the major problem i am facing through last 6-7 months, which ever bog i used every time the search function make this kind of jokes with me where as the post is still there..if u solve this problem then…"tujhe duaye lagengi yaar….tu so saal jiyega……"
2hello this will happen until your blog gets indexed in search engines and all your get indexed in it then only it will search for it.
Is there a way to search in blog titles only. Thanks
works perfectly…thank you much
Hi! Thanks for the tutorial! I need your help, in my blog (http://cisnerosheredia.blogspot.com) the results of any search are appearing at the bottom of the page (eg. http://cisnerosheredia.blogspot.com/search/label/Amphibia)… what can I do to make them appear on the top like all normal posts?
Thanks!!!
@diego ya some problem in template css only.ask from template designer.
I have tweeted this post. It's brilliant.
Thank you so much for sharing this with people like me, that have no html skills.
Thank you so much.
Thank you for the tutorial. I've practiced it at my blog http://www.ldii-sidoarjo.org and it works well.
Thank you for your info…. that so usefull….
hi, i like the 3rd type. but i dont want the words within it. I mean i want the 3rd box inner space to be empty. I dont want the words enter search items within it..how to remove the words from the search box?
@d remove this in codes value="Search"
thanks
Thanx dear http://www.dubbedmobilemovies.com
Thanks so much for the useful tool!
Thanks dude 🙂
nice, tnx
http://www.lootbag.info
Love your blog so much ! It's so helpful ! Btw, I fixed the problem with my drop-down menu 🙂