show google results in your blog page

11:00 blogger tips and trick, seo tips, website tips 1 Comment

How to Embed Google Custom Search Engine Results within Blogger Page

• Go to Your Blogger Dashboard > New Post > Edit Pages and Create a Page
• Write Search in Title of that page and do not write anything in post body.
• Now Click on "Publish Page"

•  Now, Go to your AdSense Account > Adsense Setup and click on AdSense for Search

•  You will a get a form with few options. 

1. Select "Open results within my own site" and enter blog URL as http://YOURBLOGNAME.blogspot.com/p/search.
2. Write 800px in "Enter Width of Results area" box. You can not write less than 795px.
3. Select whatever option suits you in "Ad Location" section. I will suggest you "Top and Bottom"

• Accept their Terms and Create custom search engine.
• On the next page, you will get TWO javascript codes.

• The First code (highlighted in blue) is Search Box code. Paste this code where you want to place your search box.
• The second code (highlighted in light pink) should be placed on the page where you want to display search results. i.e. you should paste this code in page we just created in blogger with title "search".
• Simply, Go to Blogger Account > Design > Add a Widget > HTML/Java Script and paste theFirst code.
• Go to Blogger Account > New Post > Edit Pages and edit the page with title Search
• Now, click on EDIT HTML and paste the second code.

• Publish Page. Its done!

Fixing Width of Page Where Search Results are Displayed

• Go to Blogger Account > Design > EDIT HTML
• Search for this code

</head>

• Replace this code with

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

• Save Template and its Done!

Note#1: Replace ENTER-URL-OF-PAGE-HERE with your original blog page address where search results appear such as http://YOURBLOGNAME.blogspot.com/p/search.html

Troubleshoot: If does not work for you, Replace .post with #main-wrapper in the code you added to your template and save.  If this still not works for you, leave a comment.