Image Beside Post Title
Blogger Sampah - 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:
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 :
Note the code with red color
Just add image's code at background code.
Change the code like this (example) :
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!
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;
}
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!
