How to Display Adsense Search Results Within Blogger?

Adsense for search is a good feature from Google Adsense team wherein you can search for something within the site and display the search results as well as some ads. This tutorial give a step by step insight on how to install the “Adsense for search” on your Blogspot and display the results within the site.

Objective of this tutorial:

1) Create a Google Search Button with Adsense Configured.

2) Display the search results within the Blogger blog itself.

3) Create an empty static page to display search results with ads.

Advantage of this method on your blog:

1) Retaining the traffic within the site.

2) Giving an option for a better custom search for the site and the visitors.

3) Some more Adsense impressions and clicks via search results.

Things you need:

1) Your website where Adsense is approved.

2) A static empty page.

3) Adsense Search Code.

4) Adsense Search Box Code.

IMPORTANT: Know the “Adsense for Search Policy” FAQs before proceeding.

Steps to Display Adsense Search Within Blogger Site:

Create A Page For Search To Display:

STEP 1) First, you need to create a simple empty static page to display the search results.
Eg from my site: http://www.itechcolumn.com/p/search-results.html

STEP 2) Style the static page, so that nothing is on the static page except the search results.
Learn how to style the static page from here.
Note: The search results function the best on 800px width.

Create Adsense Search Box Code and Adsense Search Code:

STEP 3) Go to Adsense(New Adsense Interface)
Go to “My Ads” > Click “Search” > Click “Custom Search Engines“

Click “New custom search engine“
Fill out all the required details –
Choose the search box style, The ad style to be displayed when someone searches, and finally under the “Search Results” tab do the following settings:

Replace “http://www.yourblog.com/p/your-static-page.html” with your static page URL.

Once done, click on “Save and get the code“.

Installing the Adsense for Search on Blogger:

STEP 4) You get two sets of codes from STEP 3:
a) Search Box Code

b) Search Results Code

>>Place the “Search Box Code” on your sidebar/footer/header or where-ever you wish the custom search box to appear on your Blogger blog.
Note: You can place this code multiple times on your Blogger blog.
I’ve placed my search box code on the sidebar HTML/JavaScript widget and also on my Search static page.

>>Place/paste the “Search Results Code” to the HTML section of the static empty page you just created.
Update the standalone page again. You are set to go!!!

Hope you liked this tutorial. Enjoy retaining your traffic within your Blogger blog for some more time.
Stay tuned for more updates.

~iTechColumn