Tuesday, 7 May 2013

How to Add an Image to Your Blog Post Title




Blog Post Titles are, as they stand, boring to look at. This is a way to make them look more eyecatching.

As you can see, I have added an image/s to my post titles. I think an image of 40px x 40px works best, so I have made the code to coincide with these measurements. The coding will actually re-size any image to fit in this space. Just make sure you choose an image that will look good at this size. The following is the CSS I have created.

For one image to the left or right of your Post Title:

.post h3{
background:url(URL OF THE IMAGE) no-repeat top left;
background-size:40px;
padding: 0px 42px 0px 42px;
}

How to tweak the code

URL OF THE IMAGE is where you place the copied Image URL
left you can change to right, depending on what side you would like the image to appear.




For two images, one on either side of your post title:

.post h3{
background:url(
URL OF THE IMAGE) no-repeat top left, url(URL OF THE IMAGE) no-repeat top right;
background-size:40px;
padding: 0px 42px 0px 42px;
}


How to tweak the code

URL OF THE IMAGE is where you place the copied Image URL

Now, to apply your code go to:

Template →
Customise →
Advanced→
Add CSS

In the space provided, paste your completed code. It will display the result immediately. If you are happy, click the "Apply to Blog" button, and your done.

One problem which may occur is that in some blogger templates, the part of the codes that read .post h3 may differ. I am using the Awesome Inc. Template. If this does not work, try replacing .post h3, with either h3.post-title or .post h3 a.

Any questions just ask and thanks for stopping by!

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me