Customizing Google Custom Search Engine like Amfas Tech’s | How to make Google Custom Search Engine look professional

Implementing Google Custom Search Engine(CSE) into your blog would boost up your AdSense earnings. Google allows AdSense users to customize the search engine and search results code as per their requirements. After creating a search engine, you can simply customize it by going to www.google.co.com/cse webpage. Though this is a great feature from Google, the opt-in-from-options type of customization of the search engine won’t give full control in to your hands. The only way to modify it to your needs is to modify the code, which is what I’m going to share with you now.

If you are not aware of creating a custom search engine, consider the following method to create one.

Creating Custom Search Engine

1. Log on to your Google AdSense account.
2. Click on ‘My Ads’.
3. Look for ‘Search’ from the left options pane and click on it to enter.
4. Click on ‘New Custom Search Engine’ and fill in all necessary details. Do not save here!
5. Expand ‘Search results’ options. Select ‘on my website using an iframe’ from the ‘Display results:’ section.
6. In the next field, provide the URL of your blog where you think search results should be displayed. For eg., I’ve given www.amfastech.com
7. Choose the width of the results area to your wish.
8. Now ‘Save’ it and get the code. Here you will be shown ‘search box code’ and ‘results code’ separately allowing you to place search engine and results area in two different places. You may use this search bar code more than once in your blog but the results code should be used only once as to reduce confusion when searched.

If you already created a custom search engine earlier, modify the ‘search results’ settings as shown above(Refer from Step 5 to 8).

Copy the search results code from the codes shown and add it to your blog. Considering blogger platform, the code can be added as follows.

Adding code to blogger blog

• Go to your blogger dashboard after logging in.
• Go to Layout > Add a Gadget > HTML/JavaScript > Paste the following code where you want to display search results.

Search Results Code:

<div id="cse-search-results"></div>

<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 800;
var googleSearchDomain = "www.google.co.in";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js">
</script>

Add the following search bar code where ever you want to display it.

Search Bar code:

<div id='whites2'>

<form action='/' id='search' method='get'>

<input name='q' placeholder='Search amfas tech...' size='40' type='text'/>

</form>

</div>

Customizing the search bar

The search bar can be customized to look as follows,



Paste the following CSS code before ]]></b:skin> to make search bar look like amfas tech’s custom search bar.

#whites2 #search {

}
#whites2 #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLnA3vltJHdxnfLqSDkfouhP6UkAzuC6KVjWemH15EAuvolk9q6toRFQM-kFED19uNPYMfSIC6DY3B_JnUTKOmLgpijEVU810Onli1EMJdMSFJ4GDwjrrFy0pyEMspBZBpVF-NG07MP18/s1600/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 250px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#whites2 #search input[type="text"]:focus {
width: 260px;
}

Save your template and refresh your blog once and check if the search engine is working fine or not.

Please comment if you need any guidance in adding this custom search engine to your blog. We’re happy to help you!