Simple Google Image Search Engine Widget For Blog & Website

Google image search is an image search engine owned by Google Inc. This image search engine was launched in July 2001. The Google image search engine not only search the images with their title and tags but also search images with image drop methods, i.e. an image and its similar images can easily be searched by dropping it in the search engine text area. This ability of the Google image search engine makes it different from other image search engines.

Today I will tell you how to add this fantastic image search engine on your website or blog. The method I will describe below will for the simple Google image search engine widget as well as for the CSS based code for the image search engine.

You can also use these codes for simple search widgets also. To add this widget on your site just put the codes in the division where you want it to be. In the Blogger’s blog you have to go to your blog then layout then to add a gadget and finally to add HTML/JavaScript gadget. Put one of the codes given below you like most in the HTML/JavaScript gadget save and you are done.

The code for simple image search widget is as follows:

Code

<form method="get" action="http://images.google.com/images">
<input type="text" name="q" placeholder="Search Images . . ." />
<input type="submit" value="Search Google Images" />
</form>

The code for the Google image search widget with CSS spice is as follows:

Code

<style type="text/css">
form {width : 100%; margin : 0 auto; }
.search_box {padding : 6px 15px 6px 30px; margin : 3px; font-size: 14px; color : #ddd; border-width : 1px; background : transparent; border-radius : 15px; -moz-border-radius : 15px; -webkit-border-radius : 15px; }
.search_button { padding : 10px 20px; font-weight : bold; font-size: 14px; color : #ddd; background : #eee; border-width : 1px; border-radius : 15px; -moz-border-radius : 15px; -webkit-border-radius : 15px; }
</style>
<form method="get" action="http://images.google.com/images">
<input class="search_box " type="text" name="q" placeholder="Search Images . . ." />
<input class="search_button" type="submit" value="Search Google Images" />
</form>

If you have queries regarding this post, you are welcome to ask any questions.