Saturday, April 25, 2009

Image Beside Post Title

Blog How to Tricks - To make our blogs more interesting, we can add a picture / image / icon beside post title. Can add an icon on the left of post title, or can also on the right of posttitle.

There are 2 tricks to add a picture / image / icon beside of our post title. Both of this blog tricks of course has advantages and disadvantages.

2 tricks to it is add the code in the image posting our code title, while the second trick is to edit the post title background.

How to tricks, i will give the first blog tricks to add image beside post title. It usually use for add an image at right of our Post Title.

Trick 1: Playing with background posting

Results from this trick, you can see at here.

This the tricks:

Find the following code:

.post-title or .post h1

Usually, different template, the code will be different. The point, this is the properties or settings for the title of our post.

After you find it, you can see these codes following :

.post-title {
margin: 0;
padding: 0;
font: Times New Roman;
font-size: 160%;
font-weight: bold;
line-height: 45px;
border-bottom:2px solid #f2f2f2;
background: #000;

Note the code with red color

Just add image's code at background code.

Change the code like this (example) :

background: #000 url( no-repeat right center ;

You must add code 'no-repeat right center' , so that the image display can be organized.

Code green, please replace with your image code. Then save, and preview.

To 'line-height', adjust with the high of your image, that image can be seen perfectly.

Now, you have a picture beside your post title. Enjoy it!


ybl said...

nice info...tq

sussane said...

its useful informative,instructions,its a nice post

Abilashan Mwg said...

I couldnt find .post-title or .post h1

this is my site -

Funday Pande said...

Your Post is very nice,
So i want to share it to my friend in the social network,
i say thank you for it,
you can join to my blog or just blog walking and comment to :
Wisata Kolam Air Panas Banjar
Thank you for your attention

Post a Comment


© Newpaper Template Copyright by Blog - How to Tricks | Template by Fanchon0706 | Blog Trick at EasyBlogTrick