Add Custom Search in Google Custom Search
Visit cse.google.com/cse to create a new custom search engine for our website.
- We can also choose to only search specific pages by choosing: “Include just this specific page or URL pattern I have entered”
THE_BLOGGER_URL/*.html
: this will exclude pages for labels, year, months pages.
- Then go to look and feel on the left side, in the layout panel, choose “Results only”, as we are going to add search box on our own.
- Now click “Save and Get code”.
We can add the search function anywhere: the home page, search box at sidebar, or a specific page for search.
Add Search Box to a Page
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class='cse'>
<form action='#' id='cse-search-box'>
<table>
<tr>
<td><input id="searchInput" type='text' name='q' size='80' /></td>
<td><input type="submit" name="submit" value="Search" /></td>
</tr>
</table>
<input name='cx' type='hidden' value='000071145641082027410:THE_CSE_ID'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
</form>
<script type="text/javascript" src="https://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
</div>
Add a Blogger Gadget
We can also add a blogger gadget: Add a “HTML/Javascript” gadget, put the above code, but change the searchInput size, change the form action to the url of search result page.
Add Search Result to a Page
<script async src="https://cse.google.com/cse.js?cx=THE_CSE_ID"></script>
<div class="gcse-searchresults-only"></div>
Remove Ads from Google Custom Search
We can remove ads from search results if we don’t have Google Adsense account.
function removeGSCAds() {
var ads = document.querySelector(".gsc-adBlock");
ads.parentNode.removeChild(ads);
};
window.addEventListener?window.addEventListener("load",removeGSCAds,false) :
window.attachEvent && window.attachEvent("onload",removeGSCAds);
The Complete Code
The following is the complete code to add search box and search result.
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class='cse'>
<form action='#' id='cse-search-box'>
<table>
<tr>
<td><input id="searchInput" type='text' name='q' size='80' /></td>
<td><input type="submit" name="submit" value="Search" /></td>
</tr>
</table>
<input name='cx' type='hidden' value='THE_CSE_ID'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
</form>
<script type="text/javascript" src="https://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
</div>
<script>
var urlParams = new URLSearchParams(window.location.search);
var q = urlParams.get('q');
if(q) {
document.getElementById("searchInput").value = q;
}
function removeGSCAds() {
var ads = document.querySelector(".gsc-adBlock");
ads.parentNode.removeChild(ads);
};
window.addEventListener?window.addEventListener("load",removeGSCAds,false) :
window.attachEvent && window.attachEvent("onload",removeGSCAds);
</script>
<script async src="https://cse.google.com/cse.js?cx=THE_CSE_ID"></script>
<div class="gcse-searchresults-only"></div>