Friday, September 2, 2011

How to Display Adsense For Search Result within Blogger Page

Home > Blogg tips > How to Display Adsense For Search Result within Blogger Page
This tutorial is simply about how to create a totally unique page within blogger blog to display the search results on your blogger page instead of directing your visitor to another tab. 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. The results will display on your blog  and also make your visitors stay on your blog.

Adsense for search does not display it results on Blogger blog page simply because the AdSense for search results only  displays on a minimum of 800 px wide. So in essence blogger posting area must be 800px and 99.9% of blogs is no where near that.

so for this tricks to be implemented, you have to fix it. that is make the page at least 800 pixel wide

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

This will be fairly simple for most of you as the code is almost universal but some Blogger templates as always are coded differently. especially the third party templates. 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 Only sites i select' as shown below and now Enter the URL of the page you created into the URL field and continue.



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 that is your search bar.The second piece of code you must copy and paste it 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. Make sure you backup your template

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

</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>

Alert - 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. if it does not work look for the following codes below.

If it does 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 quite simple and am sure everyone can do it.Make sure to check out more of our AdSense Posts. in case you having any problem just hit the comment form.

I hope this info helps? feel free to share this post with your friends using the like/share buttons. you can also subscribe to my blog below this post for more tips delivered to your inbox. or simply ask any question by using the comment box below. subscribe and never miss any future post through this link CLICK HERE TO SUBSCRIBE Once entered, you will have to check your inbox for a confirmation email containing a confirmation link. Once you VERIFY your email by clicking on the confirmation link in the message, you will never miss any future articles again.

No comments:

Post a Comment

Please if you have any question to ask or contributions to make, use the comment box and do not spam. spam comments will be removed

Related Articles

Widget customized by Cyracks