Configuring Styled Google Custom Search Results

Finally, here is the last part of our tutorial regarding the "styled" Google Custom Search Engine for our Weebly site. At this point, we will assign a separate page dedicated for the search results. Backgrounds and border colors, including the font style can be customized as well. Without so much ado, let's fire it up!

REQUIRED TOPICS

1. Custom Search Engine for Weebly Free Users 
2. Styling Google Custom Search Engine

CODES NEEDED

We will be needing both your original CSE code from Google and a liitle configuration from the styled CSE. So, remember this two codes which I'm gong to reillustrate below:

Sample code of the original CSE:

<script>
  (function() {
    var cx = '003074870824758447082:2efnarx24wu';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Sample code of the styled CSE:

<form id="searchbox_003074870824758447082:2efnarx24wu" action="URL of the Page where the Result is to be shown">
  <input value="003074870824758447082:2efnarx24wu" name="cx" type="hidden"/>
  <input value="FORID:11" name="cof" type="hidden"/>
  <input id="q" name="q" size="70" type="text" />
  <input value="Search" name="sa" type="submit"/>
</form>

RESULTS SET-UP

Results can be from any of your pages. Making it clearer, just follow these steps:

1. Create a page entitled "Search Results" and edit it.

2. Drag an "embed code" element, paste your original CSE code. Publish your site. The secret formula in here is to use the CSE code with the lay out "Results Only" as I wrote on my last post. Unable to follow this can cause unwanted outputs.

3. Back to Weebly. On your published site, copy the link of that page entitled "Search Results".

4. Paste the link on your styled CSE replacing the word URL of the Page where the Result is to be shown.

5. Publish your site again.

You may now test your CSE and the results will show up on the page we entitled "Search Results". You may hide that page on your navigation menu.

RESULTS DESIGN

We can easilly design the search results including its borders and backgrounds. Simply log on to your Google Custom Search Engine homepage, click on desired CSE titlte > look and feel > Customize Tab and from that, you can edit the results general, title, url and snippet.

CONCLUSION

Our tutorial for FREE STYLED CSE is finished. I'm glad to see your Weebly site having this type of search button if you can't afford the PRO feature.

Just one more thing, be my FeedBurner subscriber and I will help you insert that CSE on your navigation just like what's on my demo site.

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!