Add Google Custom Search to WebSite



Awesome Tips Series about Blogger

Visit cse.google.com/cse to create a new custom search engine for our website.

  • We can also choose to only search specific pages by choosing: “Include just this specific page or URL pattern I have entered”
    • THE_BLOGGER_URL/*.html: this will exclude pages for labels, year, months pages.
  • Then go to look and feel on the left side, in the layout panel, choose “Results only”, as we are going to add search box on our own.
  • Now click “Save and Get code”.

We can add the search function anywhere: the home page, search box at sidebar, or a specific page for search.

Add a Blogger Gadget

We can also add a blogger gadget: Add a “HTML/Javascript” gadget, put the above code, but change the searchInput size, change the form action to the url of search result page.

Add Search Result to a Page

We can remove ads from search results if we don’t have Google Adsense account.

The Complete Code

The following is the complete code to add search box and search result.

Labels

adsense (5) Algorithm (69) Algorithm Series (35) Android (7) ANT (6) bat (8) Big Data (7) Blogger (14) Bugs (6) Cache (5) Chrome (19) Code Example (29) Code Quality (7) Coding Skills (5) Database (7) Debug (16) Design (5) Dev Tips (63) Eclipse (32) Git (5) Google (33) Guava (7) How to (9) Http Client (8) IDE (7) Interview (88) J2EE (13) J2SE (49) Java (186) JavaScript (27) JSON (7) Learning code (9) Lesson Learned (6) Linux (26) Lucene-Solr (112) Mac (10) Maven (8) Network (9) Nutch2 (18) Performance (9) PowerShell (11) Problem Solving (11) Programmer Skills (6) regex (5) Scala (6) Security (9) Soft Skills (38) Spring (22) System Design (11) Testing (7) Text Mining (14) Tips (17) Tools (24) Troubleshooting (29) UIMA (9) Web Development (19) Windows (21) xml (5)