Home
I'm gonna show the basic structure of the search bar. It consists of:
- The search form action -
<form>tag. - The text (query) input -
<input>tag, can be text type or search type. - The button (submit) input (optional) -
<input>tag, using submit type. - The styling of the text input and the button.
The searching method is conveniently powered by the Google Custom Search Engine (GCSE) - particularly using the Results Only template for the search results.
The HTML of the search bar above looks like this :
The form action URL will be different on your website/blog.
It depends on where you put the HTML part of the GCSE.
On previous example, I put the JavaScript above the </body> section. You should do that. Should, but you're not obligated to.
You can also put the entire code from GCSE - JavaScript and HTML - on the page where you want the results to appear (you don't have to paste again above </body> the section).
GCSE will need the
name="q" attribute for the query search input.
The
size="25" states the number of characters (strings) visible on the search bar (text input).The basic styling of that (CSS)
The selectors classes' names are different than the previous example, because, well, this is a different example.
I'm using
inherit for the font family and size so it will blend in with the blog theme.To make the size of the text input wider or narrower, you can adjust the
padding property of the .text-bar class selector.Then, adjust the
padding of the .search-button selector, so they will look synchronized.
To set the button background and text color you need to change the background and color properties in the
.search-button selector.
Thank you, but how to setup the loading page before result like yours,? and my result always include all of my blog label, so the result become huge.
ReplyDeleteHi. Thanks for your interest. This post is quite old. I do not use GCSE on this blog anymore. Instead I use Blogger V3 search, explained on https://developers.google.com/blogger/docs/3.0/reference/posts/search
DeleteAbout the loader, place an image, like an animated GIF on the top of your search result. I use base64 version of it because it is very tiny, under 2 KB. Then, when the search has loaded, replace the image with whatever you want on that search result. It is too specific if I explain it step by step, but that's the main idea. I hope it helps.