Open Google AdSense Custom Search Results In Blogger Blogs

The Google custom search bar returns in my opinion the most accurate results for your blog.The search bar itself is compact and stylish and can be easily added to your blog.For those of you not familiar with the Google Custom search bar it basically looks the same as the search on the Google home page and when added to your blog returns results in the same format.The big difference is the results returned are All posts on Your Blog.This is a great way to let the readers of your blog quickly find exactly what they are looking for.The Google custom search bar has been vastly improved over the years and is still constantly getting better but i have always had one Big Issue with using Google Custom search on my Blogger blogs.

One of the great options you are offered when setting up a Google custom search box for your blog is to open the results within your site or blog.So instead of readers leaving your blog and going to a separate Google page to see the results of their search they will see the results on a page that is actually part of your blog.This has a number of benefits here are three of the main ones :

- It's never good to send readers away from your blog and the separate Google page does not have a direct link back to your homepage.
- As they stay in your blog it increases your views and the search results page will be crawled by Google helping SEO.
- Displaying the results within your blog looks much more professional.

That's Fantastic but because of the minimum requirements set by Google such as minimum width of search results pages Blogger users cant actually choose the option to display the Search results on within their blog...Until Now !

In this post i will show you how you can create a totally unique page on your blog and display the results from Google Custom search on that page.

Important Update - Since this post i have created an easier way to display the results in your blog.You can still create a unique page as shown here but for the new method go to this post - Easily Open AdSense For Search Results In Blogger

Demo 1 - Go to our demo blog and use the search bar in the header to see the results page :

Demo Click Here

Cool Eh ? - But that's just a plain page, take a look at how you can customize the page :

Demo 2 - I have fully customized the search results page for Spice Up Your Blog, use any of the search bars on this log to see the result:

Click Here To Open Spice Up Your Blog In A New Window

Extra Cool eh ? - You can see more results by using any of the search bars on this blog.

There are a number of step involved to get your search bar and search results page.

- You need to create a new Google custom search bar for your blog.Only AdSense members have the option to Embed results in their Blog if you have not yet joined AdSense apply here - Google AdSense.

- You need to create the page for the results and add code to your template to customize the page.

Don't worry i will walk you through all the steps.So lets get stared, make sure to back up your template and take your time.

Open Google Custom Search Results In Your Blog

Create The Page For The Google Search Results

Step 1. First we will create the page that displays your search results.From your Blogger dashboard click 'New Post' or 'Edit Posts' > and in the top menu click 'Edit Pages' > Now Click 'New Page'.



Step 2. Add A Title Like 'Search Results' to your page but leave the actual content area totally blank and publish the page.You will now be asked how you would like the page to appear choose 'No Gadget - Link To Pages Manually' and publish.OK you will now be presented with the option to view the page, click that link.

Step 3. For the next step we need the URL of the blank page you just created so copy the URL from the address bar and keep it or you can go back for it when needed.

That's the first part covered We will Create the search bar In your AdSense account.

Get The Search Bar Code From AdSense

Many of you will have created an AdSense custom search bar previously and it's a fairly straight forward process, this time we just have to chose to use the 'Open Results In My Own Site' Option.Lets have a look :

1. Log Into AdSense

2. Click the 'Get Ads' option the the top menu > Tick 'AdSense For Search' and continue.

3. AdSense walk you through the steps of creating the Search Bar:

- In the third page you will see the 'Opening of search results page' section > Choose 'Open Results In My Own Site.

- Below this is 'Enter URL where search results will be displayed' > Enter the URL of the page you created above and just leave the width at 800px then scroll down.

- You will be asked to choose the style of the search results page > I have set up the page to work with the default pallet so leave this and move on.

- The next page requires you to accept the AdSense Terms and name your search bar (The name of the bar is only to help locate it in your AdSense account and is not important).Click 'Submit and get Code'.

- Usually you would now be presented with one snippet of code for the search bar this time you will get two.The first snippet is for the search bar and the second is for the search results page.Save both pieces of code or keep the page open as you will need both later.

OK back to your Blogger Dashboard (Are you keeping up)

Add The Search Page Code To Your Template

Step 1. In your dashboard click 'Design' > 'Edit Html'





Step 2. Find the following piece of code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code - More Info)

Step 3. Copy and paste the following code Directly Below / Under

Step 4. Don't save you template we have the final step to complete - Find the following piece of code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code - More Info)

Step 5. Replace with the code below :

YOUR-BLOGS-TITLE

Home Page

Results Page From
Spice Up Your Blog

Important - We now need to add a few things to the code.

1.Where you see URL-OF-YOUR-PAGE( Twice)  in red - Replace with the URL of the blank page you created in step 1.

2. Where You See YOUR-BLOGS-TITLE in blue - Replace with the title of your blog (You could also use 'Search Results' etc..)

3. Where you see URL-OF-YOUR-HOME-PAGE (Twice) - Replace with the URL of your blogs home page.

4. Where you see - Replace with the second section of code provided by Google AdSense.

Add The Search Bar  - OK if you took your time and sure all the code is in the right place save your template.Now add the code for the actual search bar you your blog > Just head to your Design page > Add A Gadget > Choose Html/Javascript > Paster in your search bar code and save.

That's it go test out your search bar - Very Important - While you can test your new search bar Do Not click the ads on the search results page !

As you have seen by the results page for Spice Up Your Blog you can add lost more customizations to the code.If you need more help drop a comment below.There are a lot of steps involved and it has been a hard tutorial to write but if you take your time I'm sure you will have no problems.

Make sure to check out more Helpful Posts On AdSense and our post showing you how to use the same styling to create a Totally Unique Table Of Content Site Map (Check out my Site map from the top menu for a demo).

Drop Your Comments, Views And Questions Below.