Updated Personal Blog, Added Picture in Title

I started this blog in 2005, so 10 years later it seemed like a good time to update it to take advantage of features that Blogger makes easy to add to a site. Most of the features were probably available in 2005 with WordPress plugins, but I wasn't that serious of blogger. I just wanted a decent looking place where I could occasionally share information that I think might be useful to others. The same holds true today, but I thought it might be fun to take advantage of features that are now easy to implement in Blogger.

So during this upgrade of this personal blog, I figured out one thing that might be useful to you if you're using Blogger: How to put a picture next to the title.

You can see in the upper left corner of this page that my picture is next to the title "Rick Upton". It took a little experimentation to figure out how to do this.

When editing the header of the layout, per the screenshot below Blogger gives you the following options:

1. Put a picture behind the title and description.
2. Put a picture instead of a title and description.
3. Have description placed after the image, in which case the title isn't shown.

I uploaded my photo and chose the first option. My face was covered in letters. I then chose the third option, but didn't like not having the title. So, I right clicked on the picture and got the URL for the image:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioUcmzigpu9IhQfLdRjKO1bF-xRU7DRoGjwcL6kNRpyr0qiPQoULfrOzWUX27q6kOBFE0uLXpIRUZN7VZaIBD9R3l80-GBmkcEZHyNeu_9oHC_al1gJ7vNiPdmg11PZG63MGMg/w140-h140-p/photo.jpg

I then tried configuring the header not by choosing an image, but by using an img src tag in the Blog Title field followed by text. This didn't work because the URL is too long.

So then I created an account on imgur.com and uploaded the picture there, knowing that imgur.com provides free storage of publicly accessible images with short URLs. I then took the URL from imgur.com, pasted into the Blog Title field of the header, and surrounded it with the appropriate img src tag characters, and followed that with a space and my name. And voilà, it worked.

The above steps aren't extremely detailed, so if you're interested doing the same on your Blogger blog but are getting stuck somewhere, let me know in the comments where you're stuck and I'll add detail to the instructions to make the steps clearer.