July 16, 2014

Configuring Styled Google Custom Search Results

Posted by Domingo Tambasacan at 7/16/2014

Configuring Custom Search Engine 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!


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


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:
  (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);

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"/>


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.


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.


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

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook

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!



Have any question? Feel Free To Post Below:


© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top