How to Add a Custom Google Search Engine Bar in Website Using Javascript and Google Custom Programmable Search API Full Project For Beginners

How to Add a Custom Google Search Engine Bar in Website Using Javascript and Google Custom Programmable Search API Full Project For Beginners

 

 

 

Welcome folks today in this blog post we will be talking about how to add a custom google search engine bar in website using javascript and google custom programmable search api. The full source code of project will be given below.

 

 

 

Get Started

 

 

 

Now to get started you need to go to the website here and create a new google search engine that google provides you

https://programmablesearchengine.google.com/about

 

 

 

 

 

Now after that click on the get started button to get started with the process

 

 

 

Now you need to click on the button create new google search engine to create a new google search engine

 

 

 

 

 

 

Here in the above figure just enter your website name in the correct format as shown below and also give unique name to your search engine. After this click on the button to create the search engine.

See also  Build a Bubble Shooter Game in Browser Using Vanilla Javascript Full Project For Beginners

 

 

 

 

 

Now you can see that your search engine is ready you can place it on your website. You just want to click on get code button to get the html and javascript code.

Now create a index.html file and copy paste the following code to it

 

 

 

 

This code will be unique for you just copy paste this code somewhere we will use this code inside index.html file.

 

 

index.html

 

 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Custom Search-Bar</title> 
        <style> 
            body { 
                background-image: linear-gradient(to left, white, green); 
                color: lawngreen; 
            } 
        </style> 
    </head> 
    <body> 
        <h1 style="text-align: center;">FreeMediaTools</h1> 
        <script async src="https://cse.google.com/cse.js?cx=989831cdfa5991d4b"></script>
<div class="gcse-search"></div>
    </body> 
</html>

 

 

 

Now if you open this index.html file inside your browser you will see a search engine ready on your website which is specific to your website. It only give results related to your website.

 

 

 

 

 

 

 

Leave a Reply