When I or other people used the searched function on this blog for some article they like they often couldn't find it, because the standard blogger search doesn't index all pages. This was annoying and either people left or they were forced to go through the article archive in order to find articles. There is an alternative to standard blog or google searches which allows people to always find what they are looking for. This is the google custom search, you probably heard of it, and if you don't have it on your blog yet, I suggest you consider putting it there.
The advantage of custom search engine (CSE) over the blogger search and normal google search is that you can determine how it indexes your site. If you submit your sitemap your pages will show up in the results. This makes search results from CSE more relevant than those from normal google search (even if you apply the site restriction to your site).
You can make money from adsense for search, in fact you can't opt out of ads if you don't want to pay for the professional account. I didn't want to have ads along with search results and I see this as a downside, however in the end the advantage of better results won me over.
If you want to see an example of a CSE, see the My Outsourced Brain custom search. You may also want to read an introductory article on how to set up a google custom search.
There are different choices on how to integrate the search results on your site in blogger. Some time ago I had the results embedded on my site in the sidebar, so they would always re-search for people coming from google or other search engines (similar to Chitika). During some efforts to make my site load faster I pulled the custom search result embedding because it required loading of several external files and because I got tired of all the customization efforts I put into making it look good.
Now I show the option which I currently use on this site, which is showing the results on a google site. Different to the code offered in the google custom search settings, the search form is standard HTML and does not show any google branding. The search bar is reset when you click on the search bar.
<form action='http://www.google.com/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='014996012458446089762:dlibbmmbqik'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input class='sitesearch' id='sitesearch' name='q' onblur='if(this.value=="")this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value="";' type='text' value='search here...'/></form>
Try it out below:
You can put this anywhere on your site, in a widget or in the title bar, as you see on this blog. You will have to change 014996012458446089762:dlibbmmbqik to your own CSE ID. You find your CSE ID under get code in the dashboard of your CSE or when you go to your search site in the web address.
Enjoy. Please leave a comment below for questions and suggestions.
U COMMENT
I FOLLOW
Posts
This is great stuff. I love idiot-friendly information - Woo! I was all over the DOS technology "way back when", but have since been left in the dust with too much new way too fast for my personal processing speed. Glad to have finally found a handy help source (in "English"...Thanks! :o)
Hi Jen, glad you like it. I try to make the explanations simple to follow and to put all necessary detail. If you need any additional help, feel free to ask.
Fiddling with codes of the blog is a palpable way to improve things around me. That's what I like about it.
Very nice, I was looking for something like this. I could certainly use this search engine on some of my blogs.
Best,
@Blog Directory: I think the custom search engine is very useful to find articles on my blog. Many people I know use this feature often to locate articles that otherwise don't turn up on google. You can build your own CSE in a few minutes.
You can get better Search form for blogger from: http://www.rajeshpatel.net/how-to-add-search-form-to-blogger/
Very nice. I will try it quick.
how did you put the search bar in your title bar?
That's custom style, in fact my whole template is custom-made, dynamic-width, custom color combination, took a long time to have it compatible with all browsers. If you want to take my code, look for the "searchcontrol" element in my code. You could just take a new "custom search widget" or take my code and put it in your html template within the code for your header (in my code the header has id="top"). Somewhere around this widget code you wrap an element around it (for example "div") and set id to "searchcontrol." I have its style defined like this:
#searchcontrol {
margin-top:10px;
float:right;
margin-right:10px;
}
http://minimastretchwithincreasedwidth.blogspot.com/
this is my test blog...I have created a custom search bar using your above code...It works finely...But I need one more facility in this...
I typed a query word in the search bar in my test blog..results were displayed finely..But, the query word remain stayed in the search bar...I need to erase it every time before typing a new query word....I should not erase it manually every time...what should I do? what code should I insert in the code u given above?
You can create a mouseover event for the form that sets the value to an empty string, which means that when somebody moves the mouse to the form, it will be set to zero.
Thanks for the search box. I hope you can lend me a moment of your time though. I set up the search box and it works fine but a few things are "off". First, the background color is white on mine as opposed to the grey of yours. Second, the text "search here..." does not go away when I click the box to start typing like it does with yours. Last, but not very important, the lit up border on mine when selected is far less prominent than yours.
I forgot to include my blog. http://maximusjacobus.blogspot.com/
Subscribe to replies to this post
This conversation is missing your voice. Your feedback is appreciated.
Post a Comment
You can use some HTML tags, such as <b>, <i>, <a>
You can follow the discussion of this post by subscribing.
You are free to include information from this article on your own site if you provide a backlink. You can use the following markup: