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!!

EDIT: Thanks to the work of 16 Them All here is the additional code to make the image show on your Permalink page!!!

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!

post signature

40 comments:

  1. Omodudu8/26/07, 11:41 PM

    You did not use this on your blog. I am clueless as to what this is supposed to do. Is there any chance we can see what this looks like?

    ReplyDelete
  2. Sharon Pickering 8/27/07, 5:27 AM

    @omodudu, I noticed that it doesn't show on the post page (permalink), it only displays on the home page. Click here to see it on a post

    ReplyDelete
  3. JHS8/27/07, 10:54 AM

    Hi Annie:

    I nominated you to the Magical List of Outstanding Women Bloggers!

    Now you have to nominate some women bloggers.

    I added you because you are one of the few women who maintains a techie site providing guidance to other bloggers!

    http://www.jhsiess.com

    ReplyDelete
  4. Sharon Pickering 8/28/07, 7:37 PM

    @jsh, thank you so much! I'm flattered. Now I have to look into my list of blogs I read for a nomination.

    ReplyDelete
  5. Anonymous8/30/07, 9:22 AM

    Hello Annie. I'm a french blogger and I would like to congratulate you !

    Your blog is GREAT to find some help for CSS and HTML modifications.

    My blog is about music : http://16themall.blogspt.com

    ReplyDelete
  6. Sharon Pickering 8/30/07, 5:18 PM

    @16...thanks! Nice to know it is helpful to you. BTW, the URL to your blog is incorrect if some of my readers would like to visit. It should be http://16themall.blogspot.com

    ReplyDelete
  7. Anonymous9/3/07, 7:06 AM

    It's me again ! I just found how to make the "comment-icon" appear on the permalink page : In your CSS, search this : (below "comment-link")

    /* Comments
    ----------------------------------------------- */
    #comments h4 {
    margin:1em 0;
    font-weight: bold;
    line-height: 1.4em;
    letter-spacing:.2em;
    color: $sidebarcolor;
    )

    And replace it with that :

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

    I use the minima template, and it works for me.

    ReplyDelete
  8. Sharon Pickering 9/3/07, 7:33 AM

    @16 them all, Wonderful!! I was looking all over for a secret permalink code!!! I'm going to edit this post and add your information. Thank you so much for sharing!!

    ReplyDelete
  9. Anonymous9/3/07, 9:41 AM

    I won a "post-edit" in Blog-U !
    Great ! ;-)

    I'm happy if this "tip" help some of your visitors.

    ReplyDelete
  10. Anonymous1/1/08, 1:24 PM

    I'm glad I found your blog Annie, really nice a useful mods, tips and articles, keep them coming. ;)

    ReplyDelete
  11. Anonymous7/3/08, 8:37 AM

    SpeciaL Thx !

    ReplyDelete
  12. TheRealAgent8/11/08, 10:01 PM

    Hmmm I cant really find this code on my template...

    BUT On the homepage (my test blog is on my profile), where the word "Comments" appear, i was able to find exactly the code that makes it appear. its where i had previously edited to correct the 1 comments count. now it looks like this:


    (span class='post-comment-link')
    (b:if cond='data:post.allowComments')
    (a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick')

    (b:if cond='data:post.numComments == 1')
    1 Comment **
    (b:else/)
    (data:post.numComments/) Comments **
    (/b:if)
    (/a)
    (/b:if)
    (/span)|

    is it possible to just stick an image like this these areas **. An regular html img src code doesnt seem to work.

    ReplyDelete
  13. Anonymous8/12/08, 5:41 AM

    @Therealagent, I'm getting ready to head out for work, but will look into it later!

    ReplyDelete
  14. Anonymous8/12/08, 5:48 PM

    @TheRealAgent, send me your xml file and let me take a look.

    ReplyDelete
  15. TheRealAgent8/12/08, 10:12 PM

    ok sent. thanks

    ReplyDelete
  16. Anonymous8/28/08, 5:24 AM

    Nevermind Annie,
    I think i got it . thanks

    The Real Agent

    ReplyDelete
  17. rotem10/21/09, 4:24 AM

    Hi
    your post was very useful to me, it halp a lot wiyh the HTML modifications.
    thanks again

    ReplyDelete
  18. Steven Redman12/8/10, 3:10 PM

    Another fantastic post - my website owes a lot to this website!

    ReplyDelete
  19. MLB 20114/2/11, 3:23 AM

    Good Post, Lots of resources, I have no words for your great article...

    MLB 2k11

    ReplyDelete
  20. business guide4/21/11, 2:03 AM

    Hi,
    It always pleasure to visit this blog for finding any solution regarding CSS or HTML.nice work Annie.

    Regards,
    Vanessa

    ReplyDelete
  21. G33K5/2/11, 3:05 PM

    Awesome blog. Awesome posts. Nice job there annie

    ReplyDelete
  22. Deducta6/25/11, 3:13 PM

    Thank you for happily sharing with us lesser mortals your secrets and your templates. Makes our lives easier when all we gotta do is copy and paste. LOL

    ReplyDelete
  23. Dinar7/15/11, 1:43 AM

    Thanks for wonderful post.

    ReplyDelete
  24. New Lyrics 20128/16/11, 7:02 PM

    I guess this is good...thanks for the article!

    ReplyDelete
  25. OMR software8/16/11, 8:05 PM

    Great info. Keep up the good work. Thank you for your interesting blog!

    ReplyDelete
  26. Plinth Heater8/22/11, 9:46 AM

    Yeah alot of people overlook how something looks on a site, will try to implement this on ours..

    ReplyDelete
  27. Halogen Heaters8/22/11, 9:48 AM

    lol i reckon we could learn a bit from these, our site is a bit dull by comparison.. we'll be re-looking at the design next month and be using this site 100%

    ReplyDelete
  28. Painting Easels8/22/11, 9:51 AM

    About time someone mentioned the artistic side of websites.. we'll be back annie!

    ReplyDelete
  29. Cubicle Decoration8/22/11, 9:57 AM

    on the ball annie! decorating your site well is hugely important!

    ReplyDelete
  30. calories needed to lose weight9/5/11, 12:24 AM

    I take all the utilitarian stuff on my Blog for granted. Nice to know it can look nice, too!

    ReplyDelete
  31. ascentive9/21/11, 6:07 PM

    its funny how much of an aesthetic change you can make by simply rearranging some lines of code ;)

    ReplyDelete
  32. it jobs11/14/11, 6:25 AM

    It always pleasure to visit this blog for finding any solution regarding CSS or HTML. I'm glad I found your blog Annie, really nice a useful mods, tips and articles, keep them

    ReplyDelete
  33. Seo services company Canada-Toronto12/6/11, 3:12 AM

    Thanks for the tutorial.

    ReplyDelete
  34. Dany1/8/12, 8:34 AM

    Is this working for the new version of Blogger or it could be a problem for a specific theme? I tried to add the code that you said, but it doesn't work :| Can you help me, please?

    ReplyDelete
  35. Bre1/14/12, 4:34 AM

    thank you so much for everything!! I put your button on my blog under blogs I follow at the very top! :D your awesome! http://thesmallthings89.blogspot.com/

    ReplyDelete
  36. Seo consultant1/18/12, 2:53 AM

    Yes, I am amazed on the fact that you have not used such tiny image in your blog.I hope we will see soon it in your blog too next time.

    ReplyDelete
  37. replica Tiffany2/27/12, 12:25 AM

    I'll try as I am building my blog. And your blog has so many useful tips. Thank you!

    ReplyDelete
  38. nowoczesne projekty domow3/1/12, 6:46 AM

    Annie, I remember that you have written about how to add an image of our signature below our posts, where to find it? I would love to add it.

    ReplyDelete
  39. Sharon Pickering 3/1/12, 1:11 PM

    @nowoczense,
    http://bloggeruniversity.blogspot.com/2007/02/how-to-make-post-signature-using-gimp.html

    ReplyDelete
  40. rai | online postcard printing4/3/12, 10:03 PM

    Just that easy? Oh, thanks for the info! I'll try that now in my blog. I know readers want great content, but they surely do know how to appreciate visuals! I hope this move will help me get more readers.

    ReplyDelete

Due to,happily, a steadily increasing readership, I'm not able to answer or solve all comments/problems. I do keep track of them and answer what I can as time allows. This is my attempt to balance home and blog.

To add a link in this comment, copy and paste this code in the comment window: <a href="URL">seen on post</a>
Change URL and seen on post. For instance, to have a link to BlogU, the code would look like this: <a href="http://bloggeruniversity.blogspot.com">
BlogU</a>
To use the DOFOLLOW attribute on this blog, please remember to use the NAME/URL option when commenting rather than linking to your profile page for more exposure!