How to Add Google Custom Search Engine in Blog - Search box widget is one important part of a blog, because if there are visitors who find it difficult to find articles on their blogs can search easily through the Widget Search Box.
Here I recommend using Google's special search on blogs, as the results will be more relevant and more complete than the regular search function. Moreover if you is a Google AdSense Publisher. Buddy can easily monetize blogs with this special search box. Later, AdSense ads will appear on the blog search results page.
Create a Google Custom Search Engine
1. Please visit the Google Custom Search site
2. Next please click "Create a custom search engine" to login to CSE
3. After logging into the CSE dashboard, click on "New Search Engine"
4. Then "content blog" as shown below
a. Fill in your blog url
b. Change language settings according to the language used
c. Name of search engine
d. After defining the above settings, click the "CREATE" button
5. Then click the "Get code"
6. Copy the script provided in the box
Addendum: To create a Google Custom Search Widget to Valid HTML5, please replace the code below (obtained from step 6)
<script>
(function() {
var cx = '004846510630198233812:gmb5qovgjko';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
Replace the code marked with the code below
This applies to all layouts, like <gcse:search>, <gcse:searchbox>, <gcse:searchresults>, or <gcse:searchbox-only>
<div id="gcsengine"></div>
<script>
var gcseDiv = document.getElementById('gcsengine');
gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>'
</script>
So the result will look like this
<div id="gcsengine"></div>
<script>
var gcseDiv = document.getElementById('gcsengine');
gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>'
</script>
<script>
(function() {
var cx = '004846510630198233812:gmb5qovgjko';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
Add the Google Custom Search Engine Widget to your Blog
Login to Blogger >> Layout >> Create new widget (HTML / JavaScript) >> Add the code that was copied to new widget >> click Save and see result.
Monetize Google CSE with AdSense
1. Make sure you already have a blog that can be added Google AdSense
2. Please log in on Google CSE
3. Click the Name of the Search Engine that has been created earlier
4. Select Setup Menu
5. There is Basics Tab, Make money, Admin, and Indexing. Well, Please click the Make money tab.
6. Please click the Active button on the Search Engine Monetization option.
Modify Ordinary Search Box by Adding Custom Search Engine Functions
1. If you want to install CSE function on search box that already exist in template, Please log in at Google CSE >> Click on Basics menu >> There is our unique Search engine ID given Google Search Engine >> Click the Search engine ID button >> Then copy the code inside notepad.
2. Still in the Basics menu, click the Advanced button >> Replace Search engine encoding with West European Latin-1 (ISO-8859-1).
3. Next login to Blogger >> Create post for static page >> Copy code obtained from CSE, code example:
<div id="gcsengine"></div>
<script>
var gcseDiv = document.getElementById('gcsengine');
gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>'
</script>
<script>
(function() {
var cx = '004846510630198233812:gmb5qovgjko';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
Copy the code as above into the static HTML post tab >> Then Publish post. Suppose you create a static post with the title "Search CSE", then the url in the can is "your_blog.com/p/search-cse.html".
4. Next open Template >> Edit HTML >> Search HTML from Search Box on template >> Here is sample HTML Search Box on blog template that I use.
<form action='/search' class='searchform' method='get'>
<table>
<tbody>
<tr>
<td class='search-box'>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...'/>
</td>
<td class='search-button'>
<input id='search-button' type='submit' value=''/>
</td>
</tr>
</tbody>
</table>
</form>
5. Then add this code in your search box
<input type='hidden' name='cx' value='partner-pub-004846510630198233812:gmb5qovgjko' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />
The marked code is the code of the Search engine ID that was copied in notepad, replace the code marked with the code of Search engine ID of your blog.
6. Then look at the code below
<form action='/search' class='searchform' method='get'>
Please replace the code above with the code below
<form action='your_blog.com/p/search-cse.html' class='searchform'>
7. Then the result will be like this
<form action='your_blog.com/p/search-cse.html' class='searchform'>
<input name='cx' type='hidden' value='partner-pub-004846510630198233812:gmb5qovgjko'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<table>
<tbody>
<tr>
<td class='search-box'>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...'/>
</td>
<td class='search-button'>
<input id='search-button' type='submit' value=''/>
</td>
</tr>
</tbody>
</table>
</form>
8. Save the template and see the results.
Such is the tutorial tips that I can share about How to Add Google Custom Search Engine in Blog. Hopefully with a short enough article this can be useful and good luck.
Source: https://www.arlinadzgn.com/2016/04/memasang.google.custom.search.engine.di.blog.html
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog