Google custom search makes your search result more powerful and effective for your readers. It allows them to use the power of Google searches without leaving your website. It also allows you to earn money by link it to your AdSense account. Therefore most of the blogger recommends Google custom search rather than the conventional search of Blogger or WordPress.Though it is quite easy to add these plug-in in your website or blogs, and even it does provide variety of options. One of them is of “Two page” option. In this option you are provided with two of very similar code. The first code represents the search block and the other represent the result block. If you have previously used this CSE you would probably know it. But in this option the search box and its result are placed in two different places which are quite in effective when compared to single page search options.
If you want some demo of the result of this method simply search some topic in our search box in the sidebar. Type random words/statement and see the result. If you have notice, it would have taken you to our customized static page where we have included the search box and search result in the same place. This method gives readers the ability to search their topic within that page, and this was impossible with that two page options. So how to implement this search box and search result in same place.
Steps Involved:
1: Create a New page and give it some relevant title like “Search – YOURWEBSITENAME”. Now click on “options” and doesn't allow comments on that page. Publish it, copy the page link and save it in your notepad.
2: Create you CSE here. You can also use your previous search engine that you have used earlier.
3: Now in Basic Tab add the some detail and your website that you wanted to search.
Now go to look and feel. Click on Two page option and click on Save. Change your tab to Theme or Customise or thumbnails to customize your search engine. Finally after you customization click on “Save & Get Code”.
4: In that page you would two get two codes, don’t copy this code because it is not required. In that page click on button hovering above those codes called “Search result detail”. Click it and it would open a box where you have two input boxes.
5: In First box add the link that you have saved in the notepad, for second box simply add letter “q” in it (Without quotes). Save it. For example see this below image.
7: Open that page we have created earlier. Click on HTML to edit that page source code. Add the Bigger code first and smaller code just below it. Save it.
8: Now we have to add this page link to your search box. Therefore this situation forms two cases,
First Case : You already have your search box installed in your template, in this case we have to simply edit this form so as to redirect the search term to the page we had created.
For this check this code below.
<form action='/p/search-eutectics.html' class='searchform' id='searchform' method='get'>
<label class='assistive-text' for='q'>Search</label>
<input name='q' placeholder='What are you searching for?' type='text'/>
</form>
In this code snippet you can see that where you have to add your link and that letter “q”. Edit your search box accordingly as shown above.
action : Your link
Input name : q
Second Case : if you doesn’t have search custom box. Copy the above code and add as HTML in your Layout. Make sure to replace link with your page link.
If your using above search box then add you can customize it's looks as per your requirement.
To check if it working or not search some relevant to your blog and see if it’s working. If you face any problem regarding this article feel free to ask.
0 comments:
Post a Comment