Two Easy Blog Hacks — Image Tags

Here are two helpful and easy snippets of code I use to make my blog pretty (and functional)!

An Image Aligned to the Side of the Post with a Border

Sometimes I like to stick an image in the middle of a post and wrap the text around it, like this:

It looks nice and gives the post a magazine or newspaper feel. Just a few added bits of HTML and CSS.

Put the image tag in like so, or upload the image and insert it into the blog post on your blog dashboard. Make sure you put it next to the beginning of a paragraph, next to the first word of that paragraph.

<img src="http://imageuploadedhere.com" />

After that last set of quotation marks, which hold the URL to your image, and before the backslash, add the alignment tag:

align="left"

This juts the image up against the left side of the post. You also put it on the right side, that part is up to you.

Now for putting a border next to it, so the words won’t be stuck up against it, looking a little crowded, like this:

The words are stuck up against the edge of the image. This is not very attractive, despite the fact that a man is fighting a bear over a piece of food and it’s actually pretty funny. Don’t worry, I’m about to show you how to fix it and I’m sure the man and the bear resolved this issue and learned how to share.

First, add this tag the same way you did with the align tag:

class="image-border"

Now you just need to tell it what to look like with some CSS code. Add this CSS code to your blog theme’s style sheet (the file with the .CSS extension):

.image-border {
border-right: 10px solid #ffffff;
}

Be sure to save the .CSS file.

This gives you a 10-pixel-wide padding on the right side of the image. If your image is aligned on the right, change that to border-left. You can also adjust the amount of pixels for a thicker or thinner border, or change the color #ffffff to match the background of your blog.

Your full image tag will look like this:

<img src="http://imageuploadedhere.com" align="left" class="image-border" />

Add Hover Text to an Image

Hover text is useful when you want to save space on a page, but still describe an image. For example, not everyone knows what this is:

So if you have your icon on your sidebar and you want people to know what it is or what to do with it, just add this to the image HTML:

title="Add your description or instructions here."

Hover over the RSS icon above to see.

Linked and given a hover tag, the image code looks like this:

<a href="http://theurl.com"><img src="http://imageuploadedhere.com" title="Add your description or instructions here." /></a>