Easily Display AdSense For Search Results Within Blogger Blogs




| 25 comments

AdSense For Search

In November last year (2010) i was excited to show you a way to display search results from the AdSense for Search, Search bar Within your blogger blog.This is something we see on all the top websites and Blogs but was not really an option on Blogger.Displaying the search results in your own site has many advantages, mainly you are not sending people off your blog which is never good, when users do go to a new page of search results on a page that neither looks anything like your site or Google it can be confusing, it has a more professional look within your site, increases your page views and can increase revenue from the ads on the search page.

Last November i created a totally unique page within my blog to display the search results and this required a lot of code and i know many of you struggled to implement it on your blogs.So in this post i have a simple way to display the AdSense For Search results in Blogger Blogs.

So why can we not display the results on Blogger Blogs ?

Quiet simply it was a width issue.The page that displays the AdSense for search results must be a minimum of 800 px wide.So in essence your posting area must be 800px and on 99.9% of blogs it is no were near that.

The fix

So what we will do in this tutorial is display the search results in a static page and on that page (Only That Page No Other Pages Or Posts Will Be Effected) we will remove the sidebar and this will give us the space to make the post/page section 800px wide.

I have implemented this when you use the search bars on Spice Up Your Blog, as you can see the search results span the width of the page with the sidebar hidden :

Spice Up Your Blog Search Results

This will be fairly simple for most of you as the code is almost universal but some Blogger templates as always are coded differently.If you do have trouble post a comment and i will try to help out.

What You Need

You will need to start by Creating a static page for the search results, then create a new AdSense for search in your AdSense account and finally add a small snippet of code top your template to expand the width of that specific page and hide the sidebar.

Display AdSense For Search Results Within Blogger Page


Step 1. Create a new static page on your blog, you can give it the title 'Search Results' but leave the content section empty and publish the page.

Step 2. When you publish the page you have the option to add the page to a menu, choose the third option 'No Gadget Link To Pages Manually' click 'Save and Publish'.We will need the URL of the page when creating the AdSense for search so copy the URL or just go to AdSense in a new window.

Step 3. Go To Your AdSense account and click AdSense set up > Choose AdSense For Search and follow the steps until you come to the option on were to open the search results.

Step 4. Tick 'Open Results In My Own Site' and now Enter the URL of the page you created into the URL field and continue.

AdSense search settings

Step 5. Follow the rest of the set up process, at the end you will be presented with Two pieces of code.The first piece of code is for the actual search bar and you can paste that into a Html/Javascript gadget in your sidebar or wherever you want it.The second piece of code you must copy and paste into the page you created.So edit the page, paste in the code and save.

You now have your page set up with the search results code and your search bar code in your sidebar its time to add a snippet of code to your template to remove the sidebar and widen the page.


Adding The Code In Blogger To Change Page Layout



Step 1. In Your Blogger Dashboard Click Design > Edit Html.

Design Edit Html Blogger

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)

</head>

Step 3. Copy and paste the following code directly Above / Before </head>

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

Important - Replace ENTER-URL-OF-PAGE-HERE with the URL of the page you created.

Save your template, While it will be OK to test your search bar don't use it all the time as it does generate ads and of course don't ever click the ads on your own blog.Look below for some alternate codes if it does not work.

Not Working - Replace .post with #main-wrapper in the code you added to your template and save.

Still not working leave a comment and we will take a look.That's it, the tutorial is long to make sure everyone can do it but in essence it is quiet simple.Make sure to check out more of our AdSense Posts.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

25 comments:

  1. Wow this is just what i was looking for thanks so much.

    ReplyDelete
  2. Hi Paul

    There's also another way that lets you keep the sidebars:

    If you create a Google custom-search-engine, one option is to show ads top-and-bottom only, not on the right. If you combine this with showing the results in an iFrame, then the display only needs to be 300px wide, which goes very easily into a Post or Page on most blogs. You can see an example by looking at the search-results you get from http://blogger-hints-and-tips.blogspot.com/p/blogger-helpers-search-tool.html

    NB with this method, you do need to remember to go into the Made Money tab of CSE and attach your own AdSense account to the search: there's no point in displaying ads for Google unless you're getting a cut!

    ReplyDelete
  3. Paul, your google custom search box doesn't show any results.
    I got 403. That’s an error

    ReplyDelete
  4. @ Oluvil - Thanks for the heads up.I having some problems with AdSense at the moment so i have removed the AdSense for search bars.The tutorial still works fine you just cant see the result here on SUYB.

    ReplyDelete
  5. Great blog
    This was....what i was looking for...

    Thanks a lot!!!
    http://channel-oneknowledgeformanendragarh.blogspot.com/

    ReplyDelete
  6. hey paul i did it but the search result size is bigger than the actual template can you go and check that out and tell me what to do
    thanks

    ReplyDelete
  7. Hello Paul, I just added this code to my site, however, it isnt working. Could you please explain me what I did wrong? Thank you

    ReplyDelete
  8. Hello Paul !

    Thanks for the great tutorial. I got everything set up.
    One problem, that code didn't work out for me even though i tried both ways you told. In my Result Page my sidebars are showing resulting in less space for Search results. Please help ........... Thanks

    ReplyDelete
  9. @ Beauty - So many templates are coded differantly it's hard to cover all codes.I took a quick look at your blog try changing #sidebar-wrapper to #sidebar-left-1 .

    ReplyDelete
  10. @ Paul
    Thanks much for taking a look. I tried this code and it did make the left side bar invisible but results are still showing outside of main window :(. Please take a look and let me know the possible solution. Thanks

    ReplyDelete
  11. Hey Paul ! Could you please help me ASAP :(. Thanks much

    ReplyDelete
  12. Thanks much for taking a look. I tried this code and it did make the left side bar invisible but results are still showing outside of main window And Two pages display www.musicdara.com :(. Please take a look and let me know the possible solution. Thanks

    ReplyDelete
  13. hi Paul please direct me where i have gone wrong, i did exactly as you stated but no adsense result appears on the search page i created on my blog. even when i change the .post to #main-wrapper what could be the problem? please check and tell me http://www.cyracksinternetbiz.blogspot.com

    ReplyDelete
  14. Hi,

    I'm trying to use Adsense Custome Search Engine on my Blog : TechQuark.com to open in my static page !

    I did as guided, followed multiple tutorials also, but the issue is I see no results on the static page !

    It is just the heading of static page. The google search box redirects to correct page with some extra parameters, but the page is blank no results.

    When I open results in Google Page ( using the same on TechQuark.com ), all the results are displayed correctly. I even created new blog on blogger to test the same but it doesn't work !

    I'm tired of it. Can I get Help ?

    ReplyDelete
  15. I cannot get search results to display upon using the search bar. It does however take me to the static page I created. The static page still has the sidebars on it though. I'm lost, please help. Thanks!

    ReplyDelete
  16. Everything is okay but my blog has 2 sidebars. So one is removed and one still continue to display. Please help!

    http://www.providentfundstatus.org/

    ReplyDelete
    Replies
    1. Same problem here, pleaaaaaaaaaaaaaase help!

      Delete
  17. It worked great! Thank you!

    ReplyDelete
    Replies
    1. Dyea, you said it worked for you. My blogger just converted to new set up and when I created a new page, there were no option to do step 2 as it was described in this tutorial

      "Step 2. When you publish the page you have the option to add the page to a menu, choose the third option 'No Gadget Link To Pages Manually' click 'Save and Publish'"

      Can you please let me know how you managed to create a new page, formatting it for AdSense only and not dispaying on the menu? Thank you so much.

      Delete
  18. need a video tutorial about this..Do you have any video channel.thanks a lot

    ReplyDelete
  19. nice tutorial...thanks...it worked

    ReplyDelete
    Replies
    1. Romi, you said it worked for you. My blogger just converted to new set up and when I created a new page, there were no option to do step 2 as it was described in this tutorial

      "Step 2. When you publish the page you have the option to add the page to a menu, choose the third option 'No Gadget Link To Pages Manually' click 'Save and Publish'"

      Can you please let me know how you managed to create a new page, formatting it for AdSense only and not dispaying on the menu? Thank you so much.

      Delete
  20. A year old post still helped me a lot, thanks :)

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us