Google has a "Custom Search Engine" feature inside Google AdSense. This is not only best for let your blog users search your blog in Google's way but you can will also increase Google AdSense earning whenever some will search your blog using "Custom Search Engine". Another exciting option is, you can display search results within your blog or web page so you wouldn't loss a single user. Its works very well after all its powered by Google. Whenever some one will search something, Search Results will be displayed within your blog page. All professional blog and websites use Google's "Custom Search Engine" and display search results within their blog/website page.
Blogger, WordPress, CMS or whatever your blogging platform is, you can display search results within your blog page easily. All you have to do is, create a seperate page where you want to display Search Results. Here is a step by step guide.
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.
- Select "Open results within my own site" and enter blog URL as http://YOURBLOGNAME.blogspot.com/p/search.
- Write 800px in "Enter Width of Results area" box. You can not write less than 795px.
- 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 == "ENTER-URL-OF-PAGE-HERE"'>
<style>
#sidebar-wrapper {height:0px; visibility:hidden; display:none;}
.post {width: 800px;}
</style>
</b:if>
</head>
<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.
No comments:
Post a Comment