Friday 9 December 2016

Search Box Design





How to Add Google Custom Search to Blogger 
Search Box Design
In: Blogger If your blog contains many posts or your blog navigation is quite complicated for the users, then you should use a search box on your blog.









A search box provides great user experience and is useful for users to search topics on your blog.
Blogger has a search feature in the Navbar (Navigation Bar) and you also have the option to add
built-in Blogger search box on your blog.
Search Box Design

However, the main drawback is that the search results generated by these search boxes are not exact.
In this case, you can use Google custom search to get better search results on your blog.

Google custom search engine is a product developed by Google which is used for inner site search. In simple words, when users search for a particular keyword, it will display all the relevant content on your site.
Search Box Design

It provides a lot of customization options, layout options, voice search and images search feature.
You can also monetize search result pages if you have a Google AdSense account.

It is better to have Google custom search engine on your blog. Because it will give exact search
results to your users which will make them stay on your site for a longer period. Let’s get started.

Add Google Custom Search to Blogger

Steps
http://go.ad2upapp.com/afu.php?id=955811
Go to Google custom search engine.
Sign in with your Google account and you can see a screen like this.
add google custom search to blogger





In “Sites to search”, add your site URL. You also have the option to create search engines
for parts of your site or individual pages on your site.
Choose language. Name your search engine. In advanced options, you can add up to 10 schema.org
types to your search engines (optional).
After you enter all the information, click on “Create” button. Now, you’ll see this screen.
google custom search
Search Box Design

Click on “Get code” and copy the code.
Log into your Blogger account.
Go to Layout > Add a Gadget > HTML/Javascript.
Now, give a title (optional) and paste the code. Click on “Save” button.
Search Box Design





Google Custom Search Engine
https://go.ad2upapp.com/afu.php?id=955811





OR




How to add Google custom search engine in Blogger –Search Box Design
Add Google custom search engine in Blogger - Google search barA blog, in order to give a best
 user experience must possess three important things. One is commenting system that helps users
 to interact with each other’s. Know how to enable or disable comments in Blogger. The second
 one is showing dates in posts (timestamp) that helps visitors to know whether the content is
 evergreen or not. Here is how to show / hide postdates and time in Blogger. The third one is
 search bar that helps visitors to discover more interesting content within your site. Here
we will see how to add Google custom search engine in Blogger.
Search Box Design

When it comes to search technology, first thing that definitely strikes our mind is Google.
A huge and a most preferred search engine that bring up accurate results for all user queries.
For Bloggers and webmasters, Google offers a search widget which will give a best experience
in exploring your site. So, why not Blogger search bar? Blogger by default has a search widget
which is not much efficient and it’s not capable of showing relevant results. So adding Google
search bar helps your visitors to dig the most appropriate and interesting content.
Search Box Design

Some advantages of Google custom search engine are it improves impressions and page views on
your blog. It keeps your visitors engaged by making them to find and read further articles.
Moreover you can monetize by integrating Google adsense in Google custom search engine.

Related: How to add Disqus commenting system to Blogger




How to add Google custom search engine in Blogger

Setting up Google custom search engine in your blog is very simple and it only takes minutes
to install. Just follow the step by step instructions. Search Box Design

Step 1: Login to your Blogger account and head to Google CSE homepage.

Integrate Google custom search engine in Blogger - Google search widget box

Step 2: Now at the left hand side click on “New search engine” and start entering your blog details.

Step 3: Enter your domain name without HTTP (ex: sampleblog.blogspot.com). If you manage
more than one blog then include that too.  Choose language, name the search engine and click
on create at the bottom. Search Box Design

Add Google custom search engine in Blogger - Integrating Google search bar




Now you will see a success page that says “you’ve successfully created your custom search
engine”, yes you are! To see how it works click on public URL and start searching your site.
The Google custom search engine is very basic, so before adding it in your blog we will customize it.

Google custom search bar for Blogger - Adding Google search engine widget

Step 4:  To customize the search engine go to control panel or click on edit search engine at the
left hand side. Now under setup you will have five settings. Here you can give search engine keywords,
search engine description, enable image search if you want etc. You can also integrate your Google
adsense account, add users and there are more advanced options. After the search engine configuration Search Box Design
move on to look and feel settings.

How to add Google custom search engine in Blogger blog - Search bar

Step 5: Under look and feel you will have different themes and layouts to choose from. Customize it
as per your needs and you will see the preview of this search bar towards your right side. When you
finally get the desired look and feel, click on save and get code at the bottom.



Google search bar for Blogger - Adding Google search engine widget
Search Box Design

Step 6: Now grab the script, login to your Blogger blog, move to Layout, click on add a gadget,
choose HTML / JavaScript gadget, add the script into it and finally save it. Arrange the gadget to
the desired position where you wish to render the search bar.
Search Box Design

Add Google custom search engine in Blogger blog - Google CSE bar




Now go and check your blog where you have added Google custom search bar. If you don’t like the
look and feel then you can customize it again and drop the code in your blog.
Search Box Design

Hope this post helped you on how to add Google custom search engine in Blogger. Please share and
make your comments below about this search bar.
Search Box Design

That’s it. You’ve successfully added Google custom search engine to your Blogger blog.

No comments:

Post a Comment