Add a Wordpress Spyglass Search Bar to Blogger

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0CfgpOJcIV1gZ0mG_h8-a6t092P6AR8jUz2-lZVBvJQewTZ-ruvA3ewXJtBLqauSefU7PATpvJE8Uyec9BFEhZjnvZCF75zSNxPlT6kc0aNkHcIvb8KjpWHyNcmy5imtz4_zXyUALMrE/s1600/spyglass.png

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

The next step is to add this CSS code to your template. You can do it one of two ways - either by adding it to your template manually, or, using the advanced menu item in the template designer like this:

The CSS code you want to add is the following:

/* Forms */
input[type=text],
input[type=password],
textarea {
  background: #f9f9f9;
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  color: #222;
}

input[type=text]:focus,
textarea:focus {
  color: #363636;
}

textarea {
  padding-left: 4px;
  width: 98%;
}

input[type=text] {
  padding: 4px;
}

input#searchinput {
  background: url(YOUR ICON LINK HERE!)   no-repeat 5px 6px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-size: 14px;
  height: 22px;
  line-height: 1.2em;
  padding: 4px 80px 4px 30px;
}

input#searchsubmit {
  display: none;
}

Just copy and paste this CSS code into your Add custom CSS dialog box like so:

You'll now have the CSS code for the search box ready for the actual input form. Please note that you need to add the magnifying glass search icon url link from your uploaded image - as I showed you in the first section. Just replace my 'YOUR ICON LINK HERE!' with your full URL.

Add the Search Input Form

Ok, you're now ready to add the custom HTML code for the search box. Simply create a new HTML Gadget in your sidebar.

In the HTML Gadget paste the following code:

<form action='YOUR MAIN BLOG URL/search/' id='searchform' method='get'>
<input class='field' id='searchinput' name='q' placeholder='Search' type='text'/>
<input class='submit' id='searchsubmit' name='submit' type='submit' value='Search'/>
</form>

I've highlighted that you need to add your blog's main URL in the form action. For example, if your blog URL is 'pontiac-collectors.blogspot.com' then enter 'http://pontiac-collectors.blogspot.com/search/' as the full form action. In my case I have 'http://www.bloggertipspro.com/search/'.

Go ahead and hit 'Save'. If all goes well you should see the following search box on your site:

If you don't see this, or, the search magnifying image is missing go back and check that you changed the CSS code to have the full image link and that your Blogger site's URL is in the HTML Gadget.

To search just enter the desired text in the box and press Enter. You should be good to go!

Remember, this is just a basic search bar - if you want to learn more about customizing your search input form take a look at this article - Creating an Awesome Search Box.