Image Tips & Et Cetera.

One of the things that irks me is when I'm reading comments on folks blogs is that when there is more than a pageful of comments and I scroll down towards the bottom, and I'm reading suddenly the page pops back up towards the top. The more comments, the worse this seems to happen. Its irritating.

I know why it does it, too. It does it because folks are using blogger accounts to make the comments, but they aren't using blogger to store their profile pictures.

So here goes, I'm going to tell you what to do to make your picture show up almost instantly and quit bothering us with your slow butt servers. Pay attention, this works well for other uses, like the image you use for your FavIcon (the one that shows next to your URL in the address bar, it doesn't have to be that omnipresent orange & white "B" (more on that later, like how to add one like mine.))

First you need your image file, whether or not its on your computer, or you can get it from another server on the internet.

Go into your Dashboard to create a new post, we aren't really going to create a post, but this makes available the tool we're looking to use. Hey, there's the "Add Image" button, just what we're looking for! Click it. This will bring up a dialog box, with "Add an image from your computer" and "Or add an image from the web" as our two optional methods. "Choose a layout," is below, and I haven't experimented with them, but have always just chosen "None" and "Large." Of course if your image is on your computer you'll want to click the "Browse..." button and go to wherever you have your image, and if you have your picture elsewhere on the web enter the URL to it in the appropriate URL box. Click the orange "UPLOAD IMAGE" button (what is it with Blogger and orange?)

A window will popup showing your image and telling you 'Your image has been added.
After clicking "Done" you can change your post and publish to your blog.' At the bottom click the blue "DONE" button (Thank goodness it wasn't orange.)

Now you want to select the tab that says "Edit Html." You should see something that looks similar to the following:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_cMH6wuXfzDHJstVlAxJoyasaTX7u1TJwUfN6zSQOONZUYXFTgwzHXUvHhzUxgkaBYy3-Z8VZATNI8Wgkq9EsrDsQqn8m1Rl6FtPcVUq8cAiKjrE5Du1r2PF0yS1ds4F50Jj2/s1600-h/MonaIcon.jpg"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_cMH6wuXfzDHJstVlAxJoyasaTX7u1TJwUfN6zSQOONZUYXFTgwzHXUvHhzUxgkaBYy3-Z8VZATNI8Wgkq9EsrDsQqn8m1Rl6FtPcVUq8cAiKjrE5Du1r2PF0yS1ds4F50Jj2/s400/MonaIcon.jpg" alt="" id="BLOGGER_PHOTO_ID_5093460096992237970" border="0" /></a>

For those that didn't notice, there's actually two (2) URLs shown there. Hmm, Blogger stores two different images every time you upload an image. Maybe the s400/s1600 is a resolution or compression setting... That explains how you can click an image and see it full resolution...
Anyway, to get back on subject, what you want to do is select the portion of the above between the quotes following the "href=" or the "src=" and copy it to your clipboard or write it down (ugh, what am I saying? Write? What do they make computers for?)

If you want to check, you can open a new browser window or tab and paste your URL in and it should show you the image on the blogger server (you can use the example above, its real and an icon made from Mona's profile picture.)

Now that out image is uploaded, we don't need that post we started, and chances are excellent that it already auto-archived. So let's delete it. Click "Edit Posts" under the "Posting" tab, near the right in the fourth column from the right, you will see in orange the word draft next to "by your name" , which is next to the date or time. To the right of all of it, is a blue "Delete." Click that word "Delete."

The page changes, and you get " Are you sure you want to delete this post?" near the top. This is where you want to be careful. You can delete your image here. It tells you:

"The following photos will also be deleted from Blogger. Please uncheck any that you wish to keep.
(It may take up to 24 hours for them to be removed)."

It shows your image near the bottom, above two buttons, and above that, there is a small checkbox (checked) and the word "Delete." Before continuing, un-check that box and you'll see the word "Delete" change to "Keep."

Now you can safely press the orange(!) "Delete It" button.

I detailed the heck out of this, its really very much easier than it sounds. So let's move on to that FavIcon.

FavIcons are pretty cool to have for your blog. They make it easy to recognize which tab is for your blog, and help establish a feel for your blog and are easier on the eyes than actually reading (what kind of person reads on a computer?)

Again the first thing you'll need is the image to use. I'll point you to Canadian Mind Products for an explanation and tools. Just create it as instructed, upload it as I instructed above, and copy the URL.

Now what you want to do is goto your dashboard, Click the "Template" tab, and make sure you have "Edit HTML" selected. Near the top (it may be several lines down) you will find a tag "<head>." you can add a blank line by clicking after the tag and hitting Enter or on that line, you want to add '<link rel="shortcut icon" href="">'
Click between the parenthesis and paste your URL.
Save your template by clicking the orange (there it is again) "SAVE TEMPLATE" button.

I need to change mine, apparently it doesn't show for IE (I guess I should have read about it first.)

UPDATE: It seems that only jpeg or gif images can be uploaded, which keeps us from using ico files.