Pretty up the "Business End" of Your Post!

I just wanted something pretty in all that Posted by, Comments, Permalink jumble at the end of the posts. A tiny little image is just the thing.

Make or find a small image about 10x10px. Bullets work great for this purpose. Open the Dashboard | Template | Edit HTML.

Locate the CSS style sheet:
Classic Blogger: between the <head> and </head> tags
Blogger Beta: between <b:skin><![CDATA[/* and ]]></b:skin>
Find:

.comment-link {
margin-left:.6em;
}

And add two lines to make it look like this:

.comment-link {
margin-left:.6em;
background:url("URL TO YOUR IMAGE") no-repeat 0 .20em;
padding-left:13px;
}

Make sure to save your template. Now all your posts will have your very own little pretty image!!

Same as before, locate the CSS style sheet:
Classic Blogger: between the <head> and </head> tags
Blogger Beta: between <b:skin><![CDATA[/* and ]]></b:skin>
Find this code (yours may look slightly different due to a different style):

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

and add two lines to it to make it look like this:

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
background:url("URL TO YOUR IMAGE") no-repeat 0.05em;
padding-left: 18px;
}

Now the image is on your main page and permalink page!

Information and Wallpapers

Pretty up the "Business End" of Your Post!

0 comments:

Post a Comment

Labels

Popular