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 {And add two lines to make it look like this:
margin-left:.6em;
}
.comment-link {Make sure to save your template. Now all your posts will have your very own little pretty image!!
margin-left:.6em;
background:url("URL TO YOUR IMAGE") no-repeat 0 .20em;
padding-left:13px;
}
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 {and add two lines to it to make it look like this:
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments h4 {Now the image is on your main page and permalink page!
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;
}
Labels:
Blogger Beta,
Classic Blogger,
Comments,
Design,
Graphics
40 Comments:
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?
@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
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
@jsh, thank you so much! I'm flattered. Now I have to look into my list of blogs I read for a nomination.
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
@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
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.
@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!!
I won a "post-edit" in Blog-U !
Great ! ;-)
I'm happy if this "tip" help some of your visitors.
I'm glad I found your blog Annie, really nice a useful mods, tips and articles, keep them coming. ;)
SpeciaL Thx !
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.
@Therealagent, I'm getting ready to head out for work, but will look into it later!
@TheRealAgent, send me your xml file and let me take a look.
ok sent. thanks
Nevermind Annie,
I think i got it . thanks
The Real Agent
Hi
your post was very useful to me, it halp a lot wiyh the HTML modifications.
thanks again
Another fantastic post - my website owes a lot to this website!
Good Post, Lots of resources, I have no words for your great article...
MLB 2k11
Hi,
It always pleasure to visit this blog for finding any solution regarding CSS or HTML.nice work Annie.
Regards,
Vanessa
Awesome blog. Awesome posts. Nice job there annie
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
Thanks for wonderful post.
I guess this is good...thanks for the article!
Great info. Keep up the good work. Thank you for your interesting blog!
Yeah alot of people overlook how something looks on a site, will try to implement this on ours..
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%
About time someone mentioned the artistic side of websites.. we'll be back annie!
on the ball annie! decorating your site well is hugely important!
I take all the utilitarian stuff on my Blog for granted. Nice to know it can look nice, too!
its funny how much of an aesthetic change you can make by simply rearranging some lines of code ;)
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
Thanks for the tutorial.
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?
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/
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.
I'll try as I am building my blog. And your blog has so many useful tips. Thank you!
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.
@nowoczense,
http://bloggeruniversity.blogspot.com/2007/02/how-to-make-post-signature-using-gimp.html
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.