Add Google Custom Search Engine in Blogger

How to Add Blogger Google Custom Search Engine - Search box Widget is one important part of a blogger, because if there are visitors who have difficulty finding an article on a blogger they can find it easily through the Search box or Search Box widget .

How to Install Blogger Google Custom Search Engine

Creating a Google Custom Search Engine

1. Please visit the website Google Custom Search in https://cse.google.com/cse/

2. Next please click on the button Create a custom search engine to log in to

3. Upon entry into the CSE dashboard  , click New Search Engine

4. Then the contents of the blogger description as shown

A. Fill in the URL of your blogger

B. Change the language settings according to the language used 

C. The search engine name  

D. After determining the above settings, click the buttonCREATE 

5. Then click Get code / Get code

6. Copy the script that is provided in the box

Note: To create a Widget Google Custom Search into 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 that is marked 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 in Blogger

1. Login to Blogger> Layout> Create a new widget (HTML / JavaScript)> Add the code was copied into a new widget> Click save and see the results.