Saturday, 13 December 2014

Add Google Custom Search in page of your blogger or website

Add Google Custom Search in Static page of blogger or in search page of your website. This method allow user to search content on internet without leaving your blog.

Add Google Custom Search in page of your blogger or website

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.

Search result detail two page option in Google customs search engine
6: Click on Look and Feel and this time select “Two-Column” option and then click on “Save & Get code”. Now save the two codes that have been provided here in your notepad.

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.

15 Discussion

  1. Excellent and reliable tutorial. I can confirm that everything works as described.
    Thank you Tushar.

    ReplyDelete
    Replies
    1. Hey thanks Epoca, thank you for your feedback. :) (Y)

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi friend would you kindly show me with screenshots on how to manage this custom search page.

    ReplyDelete
  4. Hi friend would you kindly show me with screenshots on how to manage this custom search page.

    ReplyDelete
  5. Hi friend would you kindly show me with screenshots of this custom search page.

    ReplyDelete
  6. The 2017 Pro Bowl is the National Football League's all-star game for the 2016 season which will be played at Camping World Stadium in Orlando, Florida on January 29, 2017.
    Pro Bowl 2017

    Pro Bowl 2017 Live

    Pro Bowl 2017 Live Stream

    Pro Bowl 2017

    Pro Bowl 2017 Live

    Royal Rumble 2017

    ReplyDelete
  7. New york: Despite the fact that the Tar High heel damaged or lost in the ACC competition semifinals, that you had Fight it out to the basics meant for high of the primary 50 percent. Justin Knutson, who's got developed a experienced outside online game, and then a foul-free Fran Fresh fruit II are definitely the keys.
    March Madness

    March Madness Live

    March Madness Live Stream

    March Madness 2017

    Absolutely, we understand Level Few hasn't created a final Several. This particular organization, stocked along with proficient scorers which might also shut all the way down opponents, are going to be his initial
    March Madness 2017 Live

    ncaa March Madness

    ncaa march madness live

    ncaa tournament

    March Madness Bracket

    ncaa final four

    Regardless if you’re nevertheless over the stone border this 8-9 online game, or are seeking a complete feeling onto your Very last Five picks, we’ve got anyone protected using a standing at all 68 squads inside the contest. It's simple to with certainty help make for you to decide on the many mid-major darlings you’ve become eyeing meant for upset probable.
    March Madness

    March Madness Live

    March Madness Live Stream

    March Madness 2017

    March Madness 2017 Live

    ncaa March Madness

    ncaa march madness live

    ncaa tournament

    March Madness Bracket

    ncaa final four

    Villanova: The most notable entire seed. Quick grown timbers . team’s placement inside the most difficult region (the Eastern side, by means of matchups next to Duke in addition to SMU looming), Villanova’s three-man offensive core from Jalen Brunson, Josh Hart along with Kris Jenkins maintain a pool of likely so that you can perform repeatedly like domestic champions.

    ReplyDelete
  8. The Masters Tournament, also known as The Masters or The US Masters, is one of the four major championships in professional golf. The Masters is scheduled for the first full week of April, and it is the first of the majors to be played each year.

    The masters

    The masters 2017

    The masters Golf

    The masters Golf 2017

    The masters Live

    The masters Live Stream

    Masters golf result

    Masters results

    Masters Golf Leaderboard

    Master Leaderboard

    The masters

    The masters 2017

    The masters Golf

    The masters Golf 2017

    The masters Live

    The masters Live Stream

    Masters golf result

    Masters results

    Masters Golf Leaderboard

    Master Leaderboard

    Masters Tournament 2017 live coverage from Augusta National Golf Club at CBSSports.com. Watch the tournament live, choose cameras and get live stats.

    ReplyDelete

Note : All comments will be moderated. Do Not Spam.