Add a Wordpress Spyglass Search Bar to Blogger

by
Though Blogger provides a very good standard Google search widget for you blog, wouldn't you like it to look and feel a bit more modern much like a Wordpress site? Well, given that you may want to spice your blog up a bit, I've provided a simple search form that gives you some style.

Under the hood, the Google search widget really just calls an interface that does the searching for you. Using some basic HTML, you can call this same interface with a custom form. The difference between a Google widget and the custom one is that you need to get an image uploaded, create an HTML form, and add some custom stylesheet code.

Though the Google widget is a bit more diverse for searching both internally on your site and externally, I still like the search eyeglass view.

Upload a Search Icon


First step is to get a magnifying glass image uploaded to your blogger site. The trick is to either add the image to a post or sidebar, copy the URL that blogger used to store it, then use a style command to hide the image (if you want to hide it).

You can use the one I've added to this post if you wish. Just right click on the image and choose 'Save Picture As...' to save it on your local hard drive:



If you take a moment to look at this specific URL of this image by right-clicking on it and selecting Properties......you'll see a very long Blogger URL such as


What you'll want to do is either add this image to a Post or in the Sidebar to get it uploaded to Google. You don't have to worry about using the image from an external site. Once uploaded you can then copy its full URL as the search box image background. Be sure you use the image setting of 'Original Size'.  Just remember to get the image uploaded to your site.

Add the Search CSS Code