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


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.

24 comments:
  1. Hi there, I followed your instructions but I couldn't get the spy glass PNG to show up on my blog. Any tips/advice? (Please send me an email if necessary.) Thanks in advance!!

    ReplyDelete
    Replies
    1. Also, be sure that in your CSS code above you embed the URL -

      input#searchinput {
      background: url(YOUR ICON LINK HERE!) no-repeat 5px 6px;

      like this example:

      input#searchinput {
      background: url(http://3.bp.blogspot.com/-aJoIaNi5n0w/T4iXxkJvIiI/AAAAAAAAAHc/Umn8urN9rq4/s1600/spyglass.png) no-repeat 5px 6px;

      Delete
  2. Louise, the key is to upload the spyglass PNG file to your Blogger site as an image. So, you can do this by adding it in a Post (that's what I did here), or, just add the image in a sidebar image Gadget. Then, right click on the image to get the URL of the image ("Copy Link Location"). Practice using the spyglass in this Post to make sure you can copy a link URL.

    Hope that helps.

    ReplyDelete
  3. I've been searching FOR-EVE-R for an easy tutorial on this topic. Thank you so much, it worked like a charm. Question: I notice that the search results show up as posts one after the next within the body of my blog, as opposed to the results being listed short form in a separate box above the post body (ie; the way results are listed when using the standard blogger search field gadget). Is there anyway incorporated the same results field while still using my new customized search box?

    Thanks,
    Jen
    www.meetthecamerons.blogspot.com

    ReplyDelete
    Replies
    1. Hi Jen,

      As far as I know there isn't a good way to do this like the Google search gadget. That search form is a javascript component. What I'm using here is the older - keyword search embedded in Blogger (probably the original search before the Google component).

      - Don

      Delete
  4. Worked great. Had to adjust the width a bit, though. Thank you, thank you, thank you!

    ReplyDelete
    Replies
    1. Nicole, how did you adjust the width?

      Thanks!

      Delete
  5. thank you brother it owsum but can you tell how to float this widget top of the page ??

    ReplyDelete
    Replies
    1. Hi!

      All you need to do is wrap the widget code (just before the 'form action' tags) with a div tag that sets the margin-top value to a negative. For example, wrap the code in -- <div style='margin-top:-200px;'> -- to move the search bar up to the top. You'll have to play with the values to position it right. Don't forget to add a </div> tag at the end just after the '/form' tag.

      Hope that helps!

      - Don James

      Delete
  6. This s owsum buddy !! faster search than google official :) Thank u
    greeting from Pakistan

    ReplyDelete
  7. im gonna use it on my website, how do you know this stuff?

    Greetings from the netherlands

    http://seo-bloggers.com

    ReplyDelete
  8. hi sir here is one more problem that how to make this widget to show
    "we could not find your search term" or some thing like this when no serch term matched ??

    ReplyDelete
    Replies
    1. Hi!

      That display response is embedded in your template as the Google blogger template code - data:navMessage. You could go into that section and remove the display of the standard nav Messages at the point is has div class='status-msg-body' - but, that message is used for more than search so you'll have to check for the type of page you're on as well as it's title to add a custom search response message.

      Hope that helps!

      - Don James

      Delete
    2. Thank you sir Again you Rock!! Thank you for your kindness i am gonna give you a back link ;)

      Delete
  9. This is great! How do you adjust the width?

    ReplyDelete
    Replies
    1. Hi Kathleen,

      In the CSS code where you see this line:
      padding: 4px 80px 4px 30px;

      Change the second value (80px) to adjust your width. That will do it!!

      - Don

      Delete
  10. Hello Don. I don't have any side bars on my blog because the content is very wide anyway. I have put the search bar at the top of my blog. It is on the left. How can I move it to the right? My blog is traditionalorigami.blogspot.com. Thank you.

    ReplyDelete
    Replies
    1. Hi Aileen,

      Typically you need to do this with some CSS code to position the search bar. You can either wrap your input form with a div tag with an ID for style or use a style tag to move it right. Lookup CSS examples to float or move items to the right.

      - Don

      Delete
    2. Thank you Don. I have looked and it doesn't say exactly in which place to put the code. The code just appears as text next to my search bar. When I try inserting it in another place it appears as text again.
      Aileen

      Delete
  11. Hi, I was wondering how you could change your search bar so that it shows up at a different color. The gray search bar kind of blends in with my blog background (I'm thinking a maroon color). It would be helpful if my search bar could be a little wider too (it's kinda small).

    ReplyDelete
    Replies
    1. Hi!

      Just add a color to this part of the code:
      background: url(YOUR ICON LINK HERE!) no-repeat 5px 6px;

      The color would be a hex value just after the CSS 'background' command:
      background: #880000 url(YOUR ICON LINK HERE!) no-repeat 5px 6px;

      Hope that helps!

      - Don

      Delete
  12. I just wanted to say thank you so much for sharing this. I've been looking for something like this for ages - even google speed insights prefers this to the custom blogger one.

    ReplyDelete
    Replies
    1. Thanks, Rosie!! Glad it helped you out!

      Delete
    2. PS - I took a look at your blog - it looks great!! Nice work!

      - Don

      Delete