Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Style Google Custom Search Manually using CSS?
Have you ever tried to build a custom search engine? If yes, you are aware of how much effort it takes. The first thing is that we need to create a search algorithm that should show the best matching results when any user searches. It can take a lot of time.
Rather than wasting time on creating our search engine, what if we use the Google custom search engine? Yes, you heard right! Google allows us to integrate the search engine on our website, and Google handles everything when any user searches for something on our website.
Integrating the Google Custom Search Engine Into the Website
Users should follow the below steps to integrate the Google custom search engine into any website, from creating an account to making the search function.
Step 1 − Create an account on the Custom Search engine. When you create an account successfully, you will see the below interface. You can click the ‘Create your first search engine!’ text.
Step 2 − Now, fill in the required details and add the website link on which you want to use the Google custom search engine. You can select the ‘Search the entire web’ radio component if you want to use it on any website. Next, click on the create button.
Step 3 − On successfully creating the search engine, users can see the below interface. Copy the below code and paste it into the html file.
We are fully prepared to integrate the Google custom search engine into our website.
Syntax
Users can follow the syntax below to use the Google custom search engine.
<script async src="https://cse.google.com/cse.js?cx=5085dc69f916047fa"> </script> <div class="gcse-search"></div>
Users should put the ‘<div class="gcse-search"></div>’ code wherever they want to add the Google custom search.
Example
We have integrated the Google custom search engine with the HTML code in the example below. In JavaScript, we change the placeholder text of the search engine. We select the searchButton, and serachBox using the querySelector() method and replace its title and placeholder text.
We have added some CSS to make the search more stylish. Whenever users start to search, it automatically hides the placeholder text.
Users can try searching for anything in the search box, which will give relevant results.
<html>
<head>
<style>
body { padding: 1rem;}
.gsc-control { font-family: arial, sans-serif; background-color: lightblue !important; width: 500px; border-radius: 3rem; padding: 7px 20px !important;}
.gsc-input-box { border: 1px solid #dfe1e5;background: #fff; border-radius: 2rem; padding: 1px 10px;}
#gsc-i-id1 { color: #000 !important; line-height: 1.2 !important; background: none !important; font-size: 1rem !important; }
.gsc-search-button-v2 { padding: 0.5rem !important; cursor: pointer; border-radius: 50%; }
</style>
</head>
<body>
<h3> Creating the custom Google search using the GCSE </h3>
<p> Search anything here </p>
<!-- script from GCSE -->
<script async src="https://cse.google.com/cse.js?cx=5085dc69f916047fa"> </script>
<div class="gcse-search"></div>
<script>
window.onload = function () {
var placeHolderText = "Search on Tutorialspoint";
var searchBox = document.querySelector("#gsc-i-id1");
var searchButton = document.querySelector
(".gsc-search-button-v2 svg title");
searchBox.placeholder = placeHolderText;
searchBox.title = placeHolderText;
searchButton.innerHTHL = placeHolderText;
}
</script>
</body>
</html>
Users learned to integrate the Google custom search into the website. We have integrated it with vanilla JavaScript, but users can also integrate it with ReactJS and other frameworks.
Also, this search only works on TutorialPoint’s website, as we have created it for it only. If users want to work on their website, they should create an account on Google's custom search website, as shown in the starting part of the tutorial and need to change the Script tag.
493 Views
To Continue Learning Please Login