19 March 2009

Insert a background image to the author's comments

Advertisements

Here is an easy procedure to add an image file to blogger author / admin comments.

Make sure comments are visible. Go to Blogger Dashboard >> Settings >> Comments >> Show >> Save Settings.


Now go to Layout >> Edit HTML. Before editing your template, you may want to save a copy of it. Download Full Template.

Click on the “Expand Widget Templates” option.

Hit CTRL+F and look for "comments-block”. You will get following block of code(in black). Add the code (In Green)

..........................................

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


..........................................

Now hit CTRL+F and look for “comment-body”.

You will get following code (it may vary depending upon type of template)

..........................................

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

..........................................

Now add following code below above code

..........................................

.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
font-size:100%
font-family:courier;
background: url("URL OF IMAGE");
}


..........................................



Read about how to Add different style for blog author / admin comments

Related Posts

12 comments

April 2, 2009 at 8:16 PM

In addition to your code, you might incorporate a var [Variable name="cbgcolor" description="Comment Background Color"
type="color" default="#FFFF00" value="#FFFF00"] (sub arrows for brackets btw)

Then in the code which places the photo url you could substitute "$cbgcolor" to simply highlite the authors comments.

Great Help article overall.

April 2, 2009 at 10:06 PM

Hey Phil thanks for the code, this will make author comments more attractive :-)

July 7, 2009 at 11:53 PM

I don't care about highlighting just my own comments as the author of a blog. I'm looking for code that will put a background image (and/or color) behind each and every comment block of comment text for blogger no matter who comments. Please help me out, thanks.

July 10, 2009 at 10:51 PM

Ok, I'll try to get that for you.

August 11, 2009 at 9:32 PM

drraman

I've noticed a peculiar issue with comments on my newly changed blog template and I see yours (kind-of) has a similar (but more complete) "issue" as well.

I've noticed that the template code I am using doesn't include a permalink for each of the comments. Yours does and as your comment above shows, it is actually embedded in the comment post-date/time.

If I copy that URL as above and then paste/enter on the address bar, I jump directly to that comment in my browser window.

I'd like to add that same feature to my comment time/datestamp and can't figure that code out although I have been experimenting for quite some time now. Any suggestions?

Secondly, I see you have a sidebar element for your recent comments. So do I. The one I found and am using is bit more detailed but like your blog comment side-bar element, when the comment link is clicked, it returns to the top of the post that the comment is on, and not directly (jumps) to the specific comment at the bottom of the post as I would expect.

Any thoughts?

Thank you for any advice or tips.

FYI:

grand stream dreams my blogspot blog

Concept Nova template the original blog template source code

Membuat author gravatar pada blogspot - blog template converter (?) post showing the comments code section that is similar to my template. Note: I didn't like the gravitar images so I removed them from the code.

Cheers!

Claus V.

August 15, 2009 at 12:06 AM

I find Recent Comments section of your blog is more impressive than mine.

September 23, 2009 at 3:49 PM

good job

September 24, 2009 at 12:13 PM

Hey, I currently write a blog that has two authors, but it's important that we keep our voices separate. We're currently using two different font colors, but I'd like to use a avatar on top of our posts. I know how to insert an avatar, but would you know how to do it differently for each author?
Thanks,
Amanda

September 24, 2009 at 6:04 PM

Nice stuff

September 25, 2009 at 11:55 PM

@ Amanda

I hope two different authors are using two different e mail accounts. Tell other author to go to Blogger Dashboard using his e mail. On left side there are options like
Edit profile, Edit Photo etc.

Click on Edit photo to add Photo to Avatar.

Also read How to Add Avatar to comments

http://free-blogger-help.blogspot.com/2009/09/how-to-show-avtars-on-blogger-comments.html

Anonymous
January 5, 2010 at 2:25 PM

Very Nice posting. I liked it
webroyalty

February 5, 2010 at 2:57 AM

nice posting.........

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More