Customizing Images in Blogger Posts

There is a quick easy way to add some flair to images in your Blogger posts using some CSS (Custom Style Sheets).  Most of what Blogger templates use revolve around CSS and if you want to make changes to the HTML of your blog template, you'll need to use some CSS.

To start, you will want to find the "Edit HTML" option through the Template menu. From here, you will want to scroll down to find the CSS section for Posts. In this section, depending upon your template, you may have a section of CSS starting with the following code:

.post img {
}

This code will contain the different styles for the images that appear in blog posts.  If you don't see this code, you can create this in an empty section of the code under Posts in the "Edit HTML".  Just find an empty line, create a couple of spaces by pressing "Enter", and then paste this code. Once you have this code, you can add a border to your image or create a background color to start. Here are some examples of code you can use to enhance your image.

---

1.  Adding a thin dark grey border to your images.

.post img {
  padding:1px;
  border:1px solid #333333;
}

2.  Increase the border size, spacing, and add a background color to the image.

.post img {
  padding:2px;
  border:2px solid #333333;
  background-color:#982E3F;
}

3. Change the border to a 3D border like a picture frame and increase the border again.

.post img {
  padding:3px;
  border-left:4px solid #555555;
  border-top:4px solid #555555;
  border-right:4px solid #000000;
  border-bottom:4px solid #000000;
  background-color:#982E3F;
}

---

These are just examples of course, so you can change the colors and pixel width to fit your desire style.  You can also add other CSS styles to enhance the image to your liking.