How to add Google Custom Search Engine to Blog
How to Install Google Custom Search Engine on Blog
The search box widget is an important part of a blog, because if a visitor has difficulty finding an article on the blog, they can search for it easily via the Search box or Search Box Widget .
I highly recommend using Google's custom search on your blog, as the results will be more relevant and comprehensive than the standard search function. This is especially true if you're a Google AdSense publisher . You can easily monetize your blog with this custom search box. AdSense ads will then appear on your blog's search results page.
1. Please visit the Google Custom Search site at https://cse.google.com/cse/
2. Next, please click the Create a custom search engine button to log in to CSE.
3. After entering the CSE dashboard , click New Search Engine
4. Then fill in the blog description as shown in the image below.
A. Fill in your blog URL
B. Change the language settings according to the language used.
C. Nama search engine
D. After determining the settings above, click the CREATE button.
5. Next, click the Get code button
6. Copy the script provided in the box
Replace the marked code with the code below.
So the result will look like this
1. Login to Blogger > Layout > Create a new widget (HTML/JavaScript) > Add the code you copied earlier into the new widget > Click save and see the results.
1. Make sure you already have a blog that can be added to Google AdSense.
2. Please log in to Google CSE https://www.google.com/cse/
3. Click on the search engine name that you created earlier.
4. Select the Setup Menu
5. There are the Basics, Make Money, Admin, and Indexing tabs. Now, please click the Make Money tab.
6. Please click the Active button on the Search Engine Monetization option.
1. If you want to install the CSE function on the search box that is already in the template, please log in to Google CSE https://www.google.com/cse/ > Click on the Basics menu > There is our unique Search engine ID provided by Google Search Engine > Click the Search engine ID button > Then copy the code in notepad.
2. Still in the Basics menu, click the Advanced button > Change Search engine encoding to West European Latin-1 (ISO-8859-1) .
3. Next, log in to Blogger > Create a post for a static page > Copy the code obtained from CSE, example code:
Copy the code above into HTML tab the static post > Then Publish post . For example, if you create a static post titled "Search CSE ," the resulting URL would be "your_blog.com/p/search-cse.html."
4. Next, open Template > Edit HTML > Search HTML from the Search Box in the template > Here is an example of the HTML Search Box in the blog template that I use.
5. Then add this code in your search box.
The marked code is kode Search engine ID which you copied earlier in notepad, replace the marked code with your blog's Search engine ID code.
6. Then pay attention to the code below
Please replace the code above with the code below
7. Then the result will be like this
8. Save the template and see the results.
Done, at this point we have added the Google Search Engine to the blog search box .
A few knick-knacks to decorate the appearance of CSE on the blog by adding the code below before </head> then replace the code marked with the static post URL of your blog's CSE.
That's all the information I can provide for my fellow bloggers on how to install a Google custom search engine on your blog . I hope this is helpful.
How to Create and Install a Google Custom Search Engine Widget on a Blog
Creating a Google Custom Search Engine
1. Please visit the Google Custom Search site at https://cse.google.com/cse/
2. Next, please click the Create a custom search engine button to log in to CSE.
3. After entering the CSE dashboard , click New Search Engine
4. Then fill in the blog description as shown in the image below.
A. Fill in your blog URL
B. Change the language settings according to the language used.
C. Nama search engine
D. After determining the settings above, click the CREATE button.
5. Next, click the Get code button
6. Copy the script provided in the box
Additional: To make the Google Custom Search Widget Valid HTML5 , please replace the code below (which is 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 marked code with the code below.
This applies to all layouts, such as <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>Installing the Google Custom Search Engine Widget on a Blog
1. Login to Blogger > Layout > Create a new widget (HTML/JavaScript) > Add the code you copied earlier into the new widget > Click save and see the results.
Monetize Google CSE with AdSense
1. Make sure you already have a blog that can be added to Google AdSense.
2. Please log in to Google CSE https://www.google.com/cse/
3. Click on the search engine name that you created earlier.
4. Select the Setup Menu
5. There are the Basics, Make Money, Admin, and Indexing tabs. Now, please click the Make Money tab.
6. Please click the Active button on the Search Engine Monetization option.
Modify the Regular Search Box by Adding Custom Search Engine Function
1. If you want to install the CSE function on the search box that is already in the template, please log in to Google CSE https://www.google.com/cse/ > Click on the Basics menu > There is our unique Search engine ID provided by Google Search Engine > Click the Search engine ID button > Then copy the code in notepad.
2. Still in the Basics menu, click the Advanced button > Change Search engine encoding to West European Latin-1 (ISO-8859-1) .
3. Next, log in to Blogger > Create a post for a static page > Copy the code obtained from CSE, example code:
<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 above into HTML tab the static post > Then Publish post . For example, if you create a static post titled "Search CSE ," the resulting URL would be "your_blog.com/p/search-cse.html."
4. Next, open Template > Edit HTML > Search HTML from the Search Box in the template > Here is an example of the HTML Search Box in the 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 kode Search engine ID which you copied earlier in notepad, replace the marked code with your blog's Search engine ID code.
6. Then pay attention to the code below
<form action='/search' class='searchform' method='get'>Please replace the code above with the code below
<form action='you_blog.com/p/search-cse.html' class='searchform'>7. Then the result will be like this
<form action='you_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.
Done, at this point we have added the Google Search Engine to the blog search box .
Additional
A few knick-knacks to decorate the appearance of CSE on the blog by adding the code below before </head> then replace the code marked with the static post URL of your blog's CSE.
<b:if cond='data:blog.url == "you_blog.com/p/search-cse.html"'>
<style type='text/css'>
.post-body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAVkCF5lXSmJv2LZva8XT4PLMRG0za8lLHaN4boeeq_TIXqbahgCjm1TO7lQHTMh7G5QiDxjWX1E6iUwsPlV5SC7VLNjizz6pU-gqmyEPTiGvCb6GKWMympXoncJoAVolsCuH-WZFX9BYA/s1600/preloader.gif)50% 10% no-repeat!important;padding:60px;margin:0}
#gcsengine{margin-top:-70px}
</style>
</b:if>That's all the information I can provide for my fellow bloggers on how to install a Google custom search engine on your blog . I hope this is helpful.
Post a Comment