Update: It has been brought to my attention the following solution is buggy and may not return full results. I will update this post when a working solution is found.

There is currently a problem with Blogger’s Search Box gadget. For many users, searching with this widget will return No Results even though the search terms are present in the blog posts.

This Search Box widget is useful for several reasons. The main reason is that many users would like to place the search box in other areas of their blog. Some people have also disabled the Blogger Navbar which contains a working search box, perhaps because it appears on top of the entire blog and may pose as a design issue for some.

Here is my very simple solution if Blogger’s search function is not working for you.

The Navbar’s search

If you do a search via Blogger’s Navbar, you may notice the search results URL will look like this:

http://www.website.com/search?q=searchterm

My solution will return return the same URL and thus the same results as though you are searching via the Navbar. I actually have no idea how this works, perhaps someone can enlighten me with a comment below.

Here’s the solution:

Create a Blogger search widget

Login to your Blogger account and head over to Layout > Page Elements. Click on Add a Gadget at the bottom of the page and select HTML/Javascript.

In the Title field, enter Search or something similar. In Content, paste the following code:

<form action="search" name="input" method="get">
<input value="Search" name="q" size="20" type="text"/>
<input value="Go!" type="submit"/>
</form>

Hit Save and position the widget in the desired location. That’s it!

Images that are uploaded in Blogger are stored at Google’s Picasa Web Albums at its original file size and dimensions. If you login to Picasa with your Blogger account, then lo and behold, you shall see your original images!

Interestingly enough, the image code that Blogger inserts into your blog post are modified. Instead of linking (Blogger automatically links the images to itself) and displaying your original image file, Blogger links to a scaled-down, resized version instead. I believe only images wider than 800px are affected by this protocol.

Displaying/linking to full-sized images is pretty simple since we know that our original image files are stored on the server – we just need to access them! I have 2 solutions on how to display full-sized images in Blogger.

Posting images in their original sizes with Blogger

Alternative 1 – Using Blogger

The image code that Blogger returns to you when you upload and insert an image will look similar to this:

<a href=”http://1.bp.blogspot.com/a_bunch_of_random_characters/s640/image.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”>
<img border=”0″ src=”http://1.bp.blogspot.com/a_bunch_of_random_characters/s640/image.jpg” />
</a>

Note: In the above code, I removed a bunch of numbers and letters and replaced it with ‘a_bunch_of_random_characters’ for simplicity.

The important part of the code is the s followed by the number. In this example, it is s640. This variable may contain different numbers such as s400 and s800.

All you need to do is replace the original variable with s1600-h in both the link and image tags. Although I am not 100% sure, I believe this should always link to your original file size.

Alternative 2 – Using Picasa

Login to Picasa with your Blogger account. As mentioned above, all images uploaded in Blogger is actually hosted here.

At this point, you have two options. The first option doesn’t directly solve our problem per se, but it will still give users access to the full-sized image and it will give you some additional features. The second option directly solves our problem without the bells and whistles.

Option 1

First, click on the image you wish to insert into your blog post. Look to the right and you should see some image options. Click Link to this Photo.

Picasa's image options

You can either use the Link or the Embed image code generated for you. Embed image gives you the added bonus of using thumbnails which saves you the hassle of creating them yourself.

Either way is fine, but you should note that both links and embedded images will link to a scaled-down version of your image and that the image will be displayed within Picasa’s photo viewer. Of course, users can still click on the Magnify Glass icon to view the original size.

Option 2

While viewing an image in Picasa, click on the Magnify Glass icon at the top right until you are viewing the image at its original size. Right-click the image and select Copy Image Location if you are using Firefox, or select Properties to find the image location.

This will give you the direct link to the full-sized image.

And that is all there is to it. Happy blogging!