How to add custom google search bar inside your web-page? - GeeksforGeeks

How to add custom google search bar inside your web-page?

Last Updated : 28 May, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

A search bar is necessary for a good website. Creating your own search engine from scratch might be a difficult task but this task can be skipped with the help of Google. Google has created a website to create a custom search bar, to create your own check the below link. 

  • https://programmablesearchengine.google.com/about/

    .

Creating a Custom Search Bar: On this website, anyone can easily program their search bar by just selecting the sites you want to be searched for. Follow the steps explained below.

  • Step 1: Go to the following site and hit Get Started button.
  • Step 2: Select the New search engine button to create a new search engine.
  • Step 3: Fill the details as directed on the page and then click the create button.
  • Step 4: After hitting create you will get your code by hitting the Get Code button on the screen shown.

Note: You can modify your setting about searching sites, searching images, safe search from control panel and you can also set to show advertisement while searching through your search bar.

Embedding the Search Bar on a Webpage: After getting your code you can simply paste it inside your web page to see the working search bar.

  • Example: You can see that the output screen has a search bar with an option to search which shows the result from the sites or domain you have selected while creating this search bar. Moreover, this search option will automatically change as you change the sites from the control panel. Currently, the search results are been shown in the default manner. Apart from that, you can manipulate the result displaying manner and much more as directed on the below links 
    https://developers.google.com/custom-search/docs/element

    .

    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;">GeeksforGeeks</h1>
            <script async src=
    "https://cse.google.com/cse.js?cx=007019498718139788174:amtiepdpgeg">
            </script>
            <div class="gcse-search"></div>
        </body>
    </html> 

    

    

    
                        
    

    

    

    

                    
    • 

  • Output: 
    • 





                                    


                                                                        

                                        

                                            

                                                

                                                    
author
        

            
        

        

                                                

                                                

                                                    aditya_taparia                                                

                                            

                                            

            
                                        

                                        

                                            
    

        
        
    
                                            

                                                
                                                
                                            

                                            

                                            Improve
                                                
                                            

                                        

                                    



                            

                            
 
                                

                                    
                                        Next Article
                                        
                                    
                                    
                                    

                                        How to Add Google Custom Search Engine in New Google Sites ?
                                    

                                

                                                        

                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
  
                        

                                                

                        
                                                    

                                
Similar Reads

                                

                                    
        
            

                
How to Add Google Custom Search Engine in New Google Sites ?

                
A search bar is necessary for a good website. Creating your own search engine from scratch might be a difficult task but this task can be skipped with the help of Google. Google has created a website to create a custom search bar, to create your own check the below link. https://programmablesearchengine.google.com/about/ You have to create the sear

            

            
            

                
                1 min read
            

        
    
        
            

                
How to add custom styles and ways to add custom styles in Tailwind-CSS ?

                
Tailwind is a popular CSS framework that makes your User Interface design making the process easier. It provides low-level classes and those classes combine to create styles for various components. Tailwind-CSS comes with a bunch of predefined styling but as a developer, we need more custom styling and the styles offered by tailwind are not enough

            

            
            

                
                3 min read
            

        
    
        
            

                
How to add Google map inside html page without using API key ?

                
There are two ways to add google maps inside HTML page: Using API key Without using API key To learn first case you can follow the article while to learn other one follow this article. To insert google map inside the HTML page, follow the steps: Go to the google maps and search your desired location. Now, you will see share option, click on it. Now

            

            
            

                
                2 min read
            

        
    
        
            

                
How to add Scalable Vector Graphics to your web page ?

                
In this article, we will learn how can we add Scalable Vector Graphics (SVG) to our web page &amp; will also understand its implementation through the example. SVG is a type of image format which is written in XML for vector-based graphics. Every element and every attribute in SVG files can be animated. Scalable Vector Graphics images do not lose t

            

            
            

                
                3 min read
            

        
    
        
            

                
How to display search result of another page on same page using ajax in JSP?

                
In this example, we are creating a search bar to display the result on the same page in using ajax in JSP. AJAX stands for Asynchronous JavaScript and XML. Where Ajax is mainly used for Displaying another web page content on the same web page without refreshment of the page. You can read more about ajax technology here. Approach: We use the JQuery

            

            
            

                
                2 min read
            

        
    
        
            

                
Web Search Bar Implementation Using Javascript Conditional Flow

                
Given a list of items and the task is to filter through the items and return the best match using the search bar. There are several approaches to implement this but, we will be using a simple if-else statement to implement our search bar. Approach: Create a folder called gfgSearchBar. Open the folder in your desired IDE or IDLE. Create a html file

            

            
            

                
                3 min read
            

        
    
        
            

                
How to add records in your own local/custom database in Node.js ?

                
The custom database signifies the local database in your file system. There are two types of database 'SQL' and 'NoSQL'. In SQL database data are stored as table manner and in Nosql database data are stored independently with some particular way to identify each record independently. We can also create our own database or datastore locally in Nosql

            

            
            

                
                3 min read
            

        
    
        
            

                
How to add unique Id to each record in your local/custom database in Node.js ?

                
The custom database signifies the local database in your file system. There are two types of database ‘SQL’ and ‘NoSQL’. In SQL database data are stored as table manner and in Nosql database data are stored independently with some particular way to identify each record independently. We can also create our own database or datastore locally in Nosql

            

            
            

                
                4 min read
            

        
    
        
            

                
How to add dropdown search bar in Bootstrap?

                
A dropdown search bar in Bootstrap combines a text input field with a dropdown menu, providing users with options to select from while allowing them to input custom search queries. It enhances user experience by offering both flexibility and convenience. Preview of final output: Let us have a look at how the final output will look like. Prerequisit

            

            
            

                
                2 min read
            

        
    
        
            

                
How to make Google search bar like input box highlight on hover using CSS ?

                
In this article, we will learn how to make the input box highlight on hover like the Google search bar. Approach: We will use the CSS hover property so that whenever we hover over an element we can have some animations. For the input box, there is a box-shadow property that we can use to specify our dimensions of shadow. Syntax: element :hover{ //

            

            
            

                
                2 min read
            

        
                                    

                                                                    
                                                            

                        

                        

                                                            

                                    
Article Tags : 

                                    
                                                                    

                                                                                

                                                

                                

                                    
                                                                    

                            


                        

                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                




	
	
	

	
	

	
	    

	
	

	
	



                
        

    

    

        

            

            

        

    















	

    
  

  
  









    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox