-->

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(http://i43.tinypic.com/33tjz9c.png) 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!

Image Beside Post Title
  1. its useful informative,instructions,its a nice post

    ReplyDelete
  2. I couldnt find .post-title or .post h1

    this is my site - http://androidappsandgameshacking.blogspot.com/

    ReplyDelete