Everybody knows what a search box is, I don't need to explain it. Search box helps us to search things in a blog, website or forum. In blogger search box lies in navigation bar at the top of the blog. You can also add a search box in sidebar of your blog from layout. But now a days people are using search boxes of different styles among which many are responsive. Google search box is also used in many blogs and websites now a days. You can find many types of stylish search box on the internet but some of them don't work.
In this post I am sharing search boxes of different styles and also tell you how to add Google search box to your blog, first of all I am going to tell you how to add blogger search box to blog and below that I will tell you how to add Google search box to blog so if you aren't interested in blogger search box scroll down to Google search box.
How to add search box in blogger blog:
Adding blogger gadgets is very easy as you don't need to get code of gadgets because they are ready made by blogger. So to add a search box in blog follow below steps:
- First of all go to blogger and log-in to you account.
- After that go to Layout and click on add a gadget.
- A pop-up window will open, now scroll it down and find search box.
- Click on search box, now select where your search box should search for posts either on the blog, related links to blog or the web, check or un-check options to enable or disable search in various platforms.
- After selecting or deselecting options click on save and your search box is ready!
If you know about the Google webmaster tools then you must know that Google webmaster is providing opportunity to webmasters and bloggers to create a small search engine on Google. There are many features of this search engine some of them are mentioned below:
- Its totally free, you don't need to pay a penny for it.
- You can share this search engine with people as it provides a public url for public. For example 101Helper's search engine's url is https://www.google.com/cse/publicurl?cx=015429047261654082873:l2wznrj5qrq
- You can add it to your blog or website easily.
- You can make money with it if you have a Google Adsense account then you can show up ads in every search result.
- This search box is available in all languages, you can set your own language.
- You can set auto-complete in your search box(it will sow predictions).
- You can enable or disable speech and image search also.
- You can customize look of your search box e.g its background color, its button color, its fonts, its size, its layout(how results will show up), themes, thumbnails etc.
- You can see states of searches made through your search box also.
Its very easy to install this gadget in your blog or website, you need a Google webmaster search engine if you already use it then you must know about it but if you haven't used it yet then go to https://www.google.com/webmasters/tools/home now on this page click on other sources in the menu on left hand, here select custom search.
When you click on create you will reach to a page where you can see Get code click it and copy the code of search box and go to blogger--->layout--->add a gadget--->html/javascript and paste the copied code and click on save.
Congratulations! you are done successfully. Now whenever you want to customize your search engine e.g its look, search preferences, making money, showing ads etc go to webmaster tools click on other Resources--->custom search---->Edit search engine--->select--->your search engine. You can also add keywords to your search engine so that people can find it. to change the look of your search engine on the same page there is an option of look and feel click it, here you can change layout(how results will show up), themes and you can also customize it to your own choice. You can also set up auto-complete in you search box in search features tab click it and to set up auto-complete click on auto-complete. Unfortunately this search box don't predict searches by itself so you have to add each post name you can do it in one step also by uploading xml file of your blog.
Don't Miss:
How to add stylish responsive search box in blogger blog:
After sharing above two search boxes I am sharing a stylish search box which slides out on mouse hover. You might have seen it before as it is very popular now a days. This search box works on css and is very impressive. You can add this search box easily by following steps mentioned below, you can see image of this search box below:
You can also customize this search box e.g if you don't like its color you can change it by reading the customization points at the end of this tutorial.
- Go to blogger Dashboard and click on layout.
- Click on add a gadget and a pop-up window will be opened.
- Scroll down the opened window to Html/javascript and click on it.
- Copy below code and paste it in html/javascript tab.
- Replace http://yourblog.blogspot.com with your blog link
- Save the gadget and you are done.
Customization:
You can customize this search box also such as changing its width, color, font etc. See the below words to customize this search box:
- Search button color is #008dff you can change it to your own choice by replacing #008dff with your own color code in border:1px solid #008dff; background: #008dff;
- To change text of box replace Search Here... with your own tetx e.g search this blog or site or whatever.
- background color of search box is #eeeeee and its border is #dddddd you can customize it also but I suggest to not customize it as it looks decent.
- You can increase hover width of search box also its default width is 190px.
- You can further customize it by increase radius of search box the default radius is 10px.
Stylish search box for blogger:
After responsive search box I am going to share some more search boxes with simple and descent styles. These search boxes are powered by blogger, I have just customized it by CSS. Hope you like them. If you like any one of the search box and want to add it to your blog simply follow below steps and you are done!
- Go to blogger and log-in to your blogger account.
- Select layout and click on add a gadget.
- Scroll down to Html/javascript click on it.
- Copy code of desired search box below:
Style 2(Search box with ribbon):
Final words:
The reason for sharing this post was to help those blogger who wants their blogs stylish. Although blogger has provided a very useful search box already but I have just customized it so all credit goes to blogger.
I hope you like this post, share your experience with me by leaving a comment below. If you have any problem ask me in comments or contact me at http://101helper.blogspot.com/p/contact-me.html. Follow and subscribe to get latest news about blogger widgets. Read more posts below.
Search Tags: Search box for blogger, blogger search box widget, stylish search box, slide out search box, Google Webmaster search box, Google search box, Search boxes with different styles for blogger, 101Helper widgets for blogger.
EmoticonEmoticon