How to Add an Animated Image to the Post Title in Blogger

I couldn't find a tutorial on how to add random images to the post title so I decided to just add an animated image instead.

The file extension of the animated image is .GIF and I managed to locate an online conversion page in gifninja.com. Fortunately, the instructions are very well understandable and easy to perform.

Next, I tweaked my layout codes by adding this to my post title code (in my layout it's .post h3)

background: url('IMAGE_URL_HERE') no-repeat right center;

so that the image can be placed smugly at the rightmost part of the post title center aligned (so it doesn't quite get in the way of the post title itself). Don't forget to change to insert your image URL in the area specified in the code - (see the line in red)![Finish this post by clicking on "Read the rest of the story here..."]


Next to adjust the post title dimensions, I added these:

height: 70px;
width:550px;

And changed the padding and margin declarations into these:

margin-top: 0px;
margin-$endSide: 0px;
margin-bottom: 0px;
margin-$startSide: 0px;
padding-top: 30px;
padding-$endSide: 50px;

So what you see is the animated image in my post title.
Just try adjusting your dimensions to accommodate the visual idea that you want to show. Nice eh? Any comments?