How to Display Adsense for Search Results within Blogger and non-Blogger Blogs

Displaying search results within your site, not only appears very professional, but has the advantage that your readers do not leave your blog. Besides, the searches increase page views with the potential of increasing your ad revenue.

Whatever your blogging platform - Blogger, WordPress, Typepad or any other, you can easily display search results within your pages and earn more. All you need to do is create a 'Search Results' page, and thereafter direct your site readers' searches to that page.

Here is a step-by-step guide:

STEP 1. Create the 'Search Results' Page

• Go to Blogger Dashboard > Pages > New Page and Blank Page
• Write Search Results (or, if you prefer, Search or similar) in the 'Title' column of that page (do NOT write anything in post body yet)
• Now Click "Publish"

STEP 2. Create Google's ADSENSE FOR SEARCH code

• Log into your AdSense Account > Adsense Setup and click on AdSense for Search

A form with options opens up; fill this form to your preference, but note the following:

1. Select "Open results within my own site"
2. Copy the URL of the page you created in Step 1 above, and now paste it into 'Enter URL where search results will be displayed ' e.g. http://YOURBLOGNAME.blogspot.com/p/search-results.html
3. Select 800px in "Enter width of results area" box (NB: you can change this later on your site).
4. Select the option that suits you in "Ad Location" section (I prefer "Top and Bottom")

Click on 'Submit and Get Code' to create your custom search engine. On the next page, you will be presented with 2 (TWO) javascript codes.

STEP 3: Copy/Paste the ADSENSE FOR SEARCH codes onto your site

• The First code is the 'Search Box code'. Paste this code where you want your search box to appear on your site e.g. sidebar HTML widget, etc.
• The Second code is the 'Search Results code' (which you will paste into the page you created in STEP 1 above). So, go back to your 'Search Results' page, click on EDIT HTML and paste the second code into it. Re-publish the page (i.e. click on UPDATE).

Now, if anyone searches with that search box on your site, they will be directed to your 'Search Results' page. But one thing remains - aligning the search results width with that of your 'Search Results' page.

Fixing width of Page where Search Results are displayed

There are two ways this can be done.

STEP 4a. For the tech-savvy, go to Blogger Dashboard > Template > Edit HTML

Search for this code:

</head>

And, replace with this code:

<b:if cond='data:blog.url == "ENTER-URL-OF-PAGE-HERE"'>
<style>
#sidebar-wrapper {height:0px; visibility:hidden; display:none;}
.post {width: 800px;}
</style>
</b:if>
</head>

Save Template and you are done!

STEP 4b. For the tech-naive who don't want to mess with their HTML template code:

• go to Blogger Dashboard > Template > Customize > Advanced > Add CSS
• copy and paste the code below into the 'Add Custom CSS' box:

<b:if cond='data:blog.url == "ENTER-URL-OF-PAGE-HERE"'>
<style>
#sidebar-wrapper {height:0px; visibility:hidden; display:none;}
.post {width: 800px;}
</style>
</b:if>

Then click 'Apply to Blog' and allow to save! Hurray, you are now really done!!

---

• NOTE:
  
  • Replace ENTER-URL-OF-PAGE-HERE with your original blog page address where search results appear such as http://YOURBLOGNAME.blogspot.com/p/search-results.html
  • If STEP 4 isn't working, replace .post with #main-wrapper in the code before you save
  • If using the 'Add CSS' option does not work, you may need to use the 'Edit HTML' option. If you still have issues, please leave a comment.