Creating your own Google Custom Search Engine (GCSE)
- Go to Google CSE: http://www.google.com/cse/
- Create/add new search engine
- Set the website(s) you want to search, set the name of the search engine, and the keyword(s) of it
- Just click save for now
Using the "Results Only" template of the GCSE
- Go to "Look and Feel" and choose the "Results only"
- Save the selection, then you can tinker the "Themes" - "Customize" - "Thumbnails" and all the detailed features. Remember to save the customization every time you finish editing every detailed feature.
- SAVE and GET CODE. You'll be prompted something like this:
I put blue and red border there so you know the difference. - Just copy both (the whole code provided).
- Go to your blogger HTML editor > Find the </body> tag > Paste the JavaScript code (the one with blue box) right above that tag > Save template.
- Create a static page on your blogger blog, you can name it anything, but I recommend to give the page title "Search".
- On the static page you just created, switch to HTML mode, and then paste the HTML part of the Google Custom Search Engine (the red box above) > Save page.
Create your own simple search bar
- You can use my code below
Change the
http://your-blog-name/p/search.htmlwith the URL of the static page you've created earlier (which you pasted the HTML part of GCSE code). Or, you can just use relative address /p/search.html if the name of your static page is search.html.
To alter the width, you can decrease or increase the size of the input tag.
I'm using search input type on the example above. - The search input will look like this (this is a non-working search bar, just for demonstrating the look):
I didn't create any button for that. Because, I think, it will look redundant. - Place the search bar (form) HTML code in your blog widget > Save.
- Try the new Custom Search Engine by searching any query on your blog.
Using GCSE Logo
If you're using the free CSE as partner (as AdSense publisher) I recommend to put the logo on the placeholder of the search input.
- Almost the same HTML code, but using text input type. Why? Because we're going to put background of CSE logo on the search box. We can't put overlay image background on search input type.
- Now we're going to put CSS for the class "search-input".
You can host yourself the image logo from
http://www.google.com/cse/images/google_custom_search_watermark.gif
or just use the image URL link above.
With using the CSS above, you'll see the CSE logo - if the search bar isn't clicked (focused). If it gets focused (clicked) it will then make the logo disappear and the text color is set to black. You can see demo of the look here:
- Paste the HTML code of the search bar (form) in your blogger widget - or other spot that looks nice on your blog. And, paste the CSS in your blogger HTML <head> section.
That's it.
You can alter the look of the search result display by using inspect element on your browser, and override those selectors with your own CSS. Sounds hard, but don't worry, it's not. You can doodle it yourself.
Why don't we just use the Blogger.com search widget?
I had already tried that, and, I couldn't really take control of the looks and other stuffs. Also, it was slower for indexing blog contents compared with using our own CSE.
Another thing, the advantages of using results only template:
- You don't have to load the search bar from Google, which sometimes can be slower than other HTML elements of your blog.
- The search bar can be stylized as fancy and unique as you want.
- You can get revenue from the related ads shown on the search results - as partner (if you are an AdSense publisher and you link your CSE to your AdSense account). Either you're a partner or not, you should put Google CSE logo in/on the search bar. Branding consistency purpose. This is the guideline on Google support.
- If you're familiar with CSS - JavaScript - HTML editing (or willing to learn those), you can make the search results to "dynamically" blend in with your blog template.
Hey! Here's one mini problem in your code! It's not a problem, it's something that should be fixed!
ReplyDeleteCheck the problem here in video >> http://screencast.com/t/ZJAA927Rct
The water mark again come if you click somewhere outside the search bar, the watermark should only stay !
BTW I implemented your code on my TechGainer dot com
Heya!
DeleteWell, that's because the (:focus) event. The logo will be disappeared if user click (focus) on that input. If you click away, then the logo will be shown again.
I'll put a post to "enhance" this post. It can use a lil JavaScript to "fixed" that.
Thanks for the suggestion :D