Tutorials, Uncategorized

How to Add Google Custom Search for Blogger in a Page?

Google Custom Search for Blogger makes the navigation of a blog more easy. Readers can search for long or short keywords in the search bar and find the results they need using Google Custom Search for Blogger. It also allows the blog owner to earn money using Adsense. Most of the successful blogspot bloggers now use Google Custom search in their blogs rather than the old blogger search tool.

Google custom search for blogger in a page
​Blog owner can choose one of the search results page types from Google, one of them being ‘Two Page’ option. In this type of Google Custom Search Engine, the search box is located in one page and the results in another static page. Google provides both codes – one for search box and the other one for search results page. This post will guide you step by step to set up two paged Google Custom Search for Blogger, with images.

Step by Step Guide to Add Google Custom Search for Blogger in a Page

1. Create a Page in Blogger

Go to Blogger.com and in ‘Pages’ tab, click on ‘New Page’. Name the page something like ‘Search’ or ‘Search Results-your blog.com’. Disallow comments in that page. See the images below:

Google custom search box blogger in a page
google custom search blogspot

2. Create a Google Custom Search for Blogger blog

Create your Google Custom Search engine here. You can use your previous search engine, if you had created one already.

google custom search for blogger

3. Customize

In the ‘Basic’ tab, enter the necessary information according to your needs and the details of your blog. Go to ‘Look and Feel’ in the left. Click on ‘Two Page’ thumbnail. Now save it. You can customize the look and feel of your search engine according to the template of your blog by going to ‘Theme’ or ‘Customize’ tabs. Finally click on ‘Save & Get Code’.

Search box for blogger blogspot

4. Enter Search Result Details

​After clicking on ‘Save & Get Code’, you will get a page with a code and a button ‘NEXT: Get code for Search Results’. Don’t copy those codes. Instead, click on the ‘Search Result Detail’ button at the top. It will open a box as in the picture below. In the first box, enter your search result page link that you created in the first step, and in the second box, just enter ‘q’, as shown in the image below. Click on ‘Save’ button then.

Google search for blogger

5. Copy the code and Paste it in your page

​You will get two codes then. The first one for search box and the other one for search results. If you want the search box to appear at the top of the search results page, then copy the search box code. Edit the page you created in the first step and turn to HTML mode in the left. Type <div> and paste the search box code after it, and then the search results code. At the end, close the HTML by typing </div>. Now, your search results page is ready.

6. Add Result Page Link to Search Box

Leave a Reply

Your email address will not be published. Required fields are marked *