How to Hide Blogger Sidebar to Display AdSense For Search Results alphause

Po ... How to Hide Blogger Sidebar to Display AdSense For Search Results 6 comments When visitors are searching for content on your blog, you have three options to display the search results: opening the results in the same window, in a new window or within your own site using an iframe. The best option would be, however, to display the search results within your own site/blog, mainly because you are not sending people off your blog when they are taken to a new page of search results which could be confusing for many because it doesn't look anything like your site or Google. Therefore, displaying the search results within your site, could make it look much more professional and may also increase the page views and the revenue from the ads on the search page. A problem that many bloggers are facing is that the page which displays the AdSense for search results must be at least of 800 px wide, so the posting area must be of minimum 800px and there's nothing like this in most of the blogs. So, what we will do in this tutorial is to set up the search results to be displayed in a static page (none of other posts or pages will be affected) in which we'll remove the sidebar so that we'll have enough space to make the post/page section of 800px wide. Moreover, we will create a static pagedesigned only for the search results, then create a new AdSense for search in our AdSense account and finally add a small snippet of code top in your Blogger template to hide the sidebar in that specific page. Search results span the width of the page with the sidebar hidden: 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 thenPublishthe 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'. In case this screen doesn't show, right click onView Pageand selectCopy Link Address. We will need this URL of the page later when we will create the AdSense for search. Step 3.Go To Your AdSense account, then go toMy adstab, select theSearchoption and Create aNew custom search engine. Follow the steps until you come to theSearch resultsoption. Step 4.Select the 3rd method "on my website using an iframe", then Enter the URL of the page you created into the URL field and continue. Step 5.Follow the rest of the set up process and at the end you will be given two pieces of code. The first piece of code is for the actual search bar which you can paste into a Html/JavaScript gadget on your sidebar or wherever you want it. The second piece of code you need to copy and paste it into a new HTML/JavaScript gadget, click on Save, then drag it above the Blog Postsarea Now that you have your page set up with the search results code and your search bar code in your sidebar, it is time to add a snippet of code to your template to remove the sidebar. Adding The Code In Blogger To Change the Results Page Layout Step 1.From Your Blogger Dashboard, go toTemplateand click on theEdit HTMLbutton Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box Step 3.Find (CTRL + F) the following piece of code ]]> Step 4.Just below it, paste this code: Note: ReplacePAGE-URL-HEREwith the url of the page where the search results will be displayed (the one you have added at thestep 4) Step 5.NowSave Templateand you're done! This simple trick allows you not only to hide the sidebar in the search results page, you can as well, hide it on any page you want... just create your page and follow the same steps. It is also recommended to hide the sidebar in Privacy Policy Pages, Contact Pages and on all the non-content-based pages with little content or no content at all. Like 1 Random Posts Vertical drop down menu with jQuery17/09/2013 - 3 Comments Add Google Adsense to Blogger Header (Above the Title)07/04/2012 - 18 Comments How To Add a Floating Sticky Footer Bar in Blogger09/02/2014 - 0 Comments Related Posts: Tips To Avoid Your Google Adsense A... Add Google Adsense to Blogger Heade... Google adsense optimization tips AdSense optimization tips straight ... How to Add Numbered Page Navigation... 6 comments: Sabrez Alam 5/21/2012 Hello Admin! Thanks for such a nice tutorial. You know what....I am also having problmes to show search results in my blog India Gadget Reviews. Now I think...I will implement it easily on my blog. Thanks for the nice tutorial. Reply Blogger Tricks 6/05/2012 wow, thanks helplogger Reply SIDDHARTH 6/22/2012 This really helps NICE POST FRIEND Reply Reza Mir 3/02/2013 Excellent and extremely interesting and helpful. Thank you Reply Balkony Balkon 4/05/2013 well, very good explanation. i have done with the code on my blog. thanks. http://blogostrong.bl ogspot.com Reply Haider Ali 8/24/2013 awesome post keep it up thanks for the information :) Tricks Punch-Blogger Tutorials Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,784 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger