Google Custom Search On Your Own Website

This article is to help you enable Google Custom Search on your own website. Also, we will resolve the design issue of search icon not showing properly.

First of all, let's learn what Google Custom Search is.

It is the same search functionality that Google provides but you can addthis Google like search functionality on your website. Here is the link of the functionality that I have implemented on a live website.

http://googlecustomsearch.azurewebsites.net/

This article is for those who have already used Google Custom Search. If you are new to this term and have not implemented Google Custom Search on your website, please go through other articles and help documents first to add this functionality.

So, let’s say you have already implemented Google Custom Search functionality on your site.

Now, open control panel of Google Custom Search and go to the "Site to search" section.

You will see the URLs of websites to which you have added the search functionality and a dropdown in which "Search only included sites" is selected by default.

Now, click the dropdown and select "Search the entire Web but emphasize the included sites", as shown below.

Now, select your website checkbox and delete it. The "Sites to search" section should look like the following.

Click "Update" and you are ready to implement Google-like search functionality on your website. You can get the updated code from the "Details" section in control panel, by clicking the "Get Code" button.

Search icon design issue

Often, many of the developers face design issue while starting with Google Custom Search. Most of the times, the search icon does not show on the Search button. To resolve this issue, just paste the CSS section given below to your page's stylesheet.

<style>
    .cse .gsc-search-button input.gsc-search-button-v2,
    input.gsc-search-button-v2 {
        width: auto !important;
        height: auto !important;
        border-color: #474747;
        background-color: #474747;
        background-image: none;
        filter: none;
    }
</style>// This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

I hope, this article is helpful to the developers working on Google Custom Search.