Add Google Search box anywhere on your site and display the search results embedded on your site!

Google search results embedded on our site

Google Custom Search is a very useful gadget for site visitors to find posts quickly on that site without leaving the site.Almost all websites have a Google custom search feature activated.But different websites show it in different ways like some makes it more attractive with customization,some add it to site headers and lot more ways! Have you ever noticed how the search results appear on different sites?



In some sites the results appear on an overlay box while in some others it is displayed across the entire screen and lot more ways.There are many other options to display the search results on your site.
What is the best area to display your site search results?Most bloggers love the search results to be embedded in their site i.e the results appear on the site instead of the posts or content.Want a live preview click here

Steps To Add Search Box In A Section & Display the Search Results Embedded On Your Site  Or Blogger Blog

Steps To Create Google Custom Search For Embedded Search Results

1. Create your Google Custom Search here.
2. Click on new search engine.
3. Fill out all the required information in the setup tab.
4. Navigate to look and feel tab and click on layout tab.
5. Set how the search results appear on your site by choosing the appropriate layout option.In this case you need to choose the Two column layout option.
6. Go through the other tabs and customize your search box and search results.
7. Once done click Save & Get Code.
8. Copy the code for the search box.
9. Paste the code where you want the search box to appear.(To add it in blogger go to layout and click on add a gadget and then paste the code into a new HTML/Javascript widget.)You can also add the code directly into the Template code.
10. Replace the last line of the code <gcse:search></gcse:search> with  <gcse:searchbox-only resultsurl="Paste the blank page url here"></gcse:searchbox-only>                                                                                                                                                                                                                                                                                                           

                      Note:You must create a new blank page for the search results.

Preparing Your Site For Embedded Search Results

1. Go to your blogger dashboard.
2. Click on template code and click on Edit HTML
3. Click Ctrl + F and find the given code. <b:loop values='data:posts' var='post'>    (Make sure there is no space before < and after > tag)  Note:There may be more than one of the same code,so make sure you paste the below code after the correct code.                                                                                                                                                                                      
4. Paste the below code before the above code.                                                                                                                                        <gcse:searchresults-only/>
   
5.  Save the template.View the blog and check whether everything is working fine.
6. It's done.Enjoy!

If it is not working make sure you have pasted the code before the correct code.
If it is still not working contact us.

Share the post if it had worked for you!                                                                                                        

Browse More Articles

Tweet

Written by Unknown

We are one of the initiators of the development of information technology in understanding the need for a solution that is familiar and close to us.