Take Your Art Blog to the Next Level. . . With a Little HTML Code

Published May 12th 2010

Although I love the idea of composing my posts directly in Blogger’s interface and, with a single click, having my photographs appear and my links become linked, there’s something to be said about knowing how to use a little HTML code in order to enhance a blog post.

When you use HTML code in your post, you are not limited to Blogger’s interface. You have complete control over everything, including where your images are positioned.

To use HTML, just click the “Edit HTML” tab at the top right of your post editor.


The editor won’t look much different, but you’ll be able to add code, and then switch back to the “Compose” tab and see how it all looks.

While there are entire books written on the subject of HTML coding, you don’t need to know “everything” in order to start using it in your art blog. In fact, picking up a few simple tricks now will make more complicated code much easier to learn in the future.

So today I’m just going to teach you two simple tricks for using HTML code to make your images do exactly what you want in your blog.

How to add HTML image code to your blog posts

OK—let’s assume that you host all of your images on a free photo sharing service like flickr.com. You want to pull in an image from flickr, center it, and place it between two paragraphs, one above it and one below it.

To do that you would use the following HTML code:

<p align=”center”>

<img border=”0″ src=”http://flickr.com/image.jpg” alt=”Image Title”/>


That doesn’t look too complicated, does it? Here’s how it works, one line at a time:

1. <p align=“center”>

This line of code tells Blogger two things:

First, that you want a paragraph break (p) before the image and second, that you want the image to be centered (align=”center”).

And, since this is a line of code, you need to start with “<” and end with “>”.

2. <img src=”http://flickr.com/image.jpg” alt=”Image Title”/>

This tells Blogger where to find the image (src=”http://flickr.com/image.jpg”) and gives it some alternate text to display in case the image doesn’t show up properly in someone’s browser (alt=”title of image”).

Again, since this is code, you’ll need a “<” at the beginning and a “>” at the end.

3. </p>

This last bit of code just tells Blogger that you’re ending the paragraph (/p) which you started in the first line of code. Just like writing a regular paragraph, if you start a paragraph in HTML code, you should always end it.

And that’s it. . . you now know some basic HTML code!

Of course, if you want to include a second image, but have it stick to the right or left side of your content—you can do that too. All you need to change the align=”center” section to say align=”right” or “align=”left”.

How to make an image into a link

Now here is one final tip. . . let’s say you want to include an image from your flickr page AND make it link to your flickr gallery so anyone can click it and see your entire gallery of images.

All you need to do is create a HTML link around the image, like this:

<a href=”http://flickr.com/gallery”>

<img src=”http://flickr.com/image.jpg” alt=”title of image”/>


Again, I’ll break it down one line at a time:

1. <a href=”http://flickr.com/gallery”>

This line is the start of the HTML link. It shows where the link will go when someone clicks on it (a href=”http://flickr.com/gallery).

2. <img src=”http://flickr.com/image.jpg” alt=”title of image”/>

This line is exactly the same as before. You’re telling Blogger where to find the image, and what the alternate text should be.

3. </a>

Just like a paragraph, if you start a link, you need to end it too (/a).

If you don’t end a link, it won’t work. . . but if you do it right you’ll end up with an image that leads visitors to your gallery, or wherever you want.

Now next time you create a post in your blog, consider using a little HTML to place your images instead of Blogger’s regular interface. After all, the more comfortable you are using HTML code, the easier it will be to pick up new tricks down the road.

Did you like this article? Share it!
Then check out the related posts below.
An easy way to get others to spread the word about your blog is to create a “grab button” that fits in the sidebar of their blog. (This allows other bloggers to grab your logo or image and link to your blog, just by coping and pasting some text.) For the purpose of this tutorial, I am going to. . . read more
I recently experimented with adding Facebook's "Like" button on my Wordpress blog. With that up and running, I tested the same idea in Google Blogger, since most of the art blogs I read run on that platform. As it turns out, adding this feature at the end of your posts in Blogger is much easie. . . read more
Have you ever found yourself short on time, but you just hate to forego writing a new post for your art blog? Well, I have good news. . . there's no need to agonize over written words when a video will do just as well! The next time you're in a bind, head on over to Youtube, scroll through you. . . read more
Have you ever seen an art blog on the very popular Blogspot.com that uses more space than the standard template they give you? Many times, it's because the artist has added a third column. I managed to update my blog recently to a three column site, and here's how I did it: (NOTE: The followin. . . read more
As I stated last week, it takes a lot of work to attract readers to your art blog, but only a few weeks of non-posting to lose them forever. That's why it's important to write blog posts ahead of time and schedule them for future posting; especially when you know your schedule won't permit you. . . read more
Stay current.
Subscribe to EmptyEasel's free weekly newsletter for artists. Sign up today!
Art Contests
More art contests. . .
EE Writers
Cassie Rief Niki Hilsabeck Brandi Bowman Michelle Morris Lisa Orgler Adriana Guidi Carrie Lewis Aletta de Wal

If you'd like to write for EmptyEasel, let us know!

We love publishing reader-submitted art tutorials, stories, and even reviews.Submit yours here!