Google Custom Search Bar HTML
Your users must have a reliable and easy method for finding your content. One easy way to achieve this is by including a search powered by Google. But simply adding the default code provided by Google leaves your site’s search lacking. While the functionality is there, the professional styling expected on websites today is notably absent. The tutorial below solves this dilemma, merging the powerful functionality of Google Custom Search with a sleek design.
You will first have to create a custom search engine from cse.google.com
Once you’ve created your custom search engine, you can add the Custom Search Element to your site. To do this, you’ll need to copy some code and paste it into your site’s HTML where you want your search engine to appear.
- In the Control Panel click the search engine you want to use.
- Click Setup in the sidebar, and then click the Basics tab.
- In the Details section, click Get code. Copy the code and paste it into your page’s HTML source code where you want the Custom Search element to appear.
The <div class="gcse-search"></div> element is a placeholder – this is where the search element (both search box and search results) will be rendered.
