How to Highlight Blog Author Comments in Blogger

♠ Rakshith Mlore in ,
Do you see your own comments hidden with other comments on your blog? What if you want to highlight your own comments and let your readers know quickly what have you responded? Will not it be cool ? Let’s get on with the tutorial straightaway.
1575023508196859184

How to Highlight Blog Author Comments in Blogger

  • Go to Blogger.com.
  • Login into your Blogger Dashboard
  • Template (Design in old interface) --> Edit HTML and check the "Expand Widget Templates" option.

    Important Step : Now as a precautionary measure please download your template so that you have an emergency backup/restore if in case you create any errors.
  • Then, find (CTRL+F) this code in the template.
]]></b:skin>
  • And paste the below code before ]]></b:skin> 
.comment-body-author {
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}
  • Now you have to go to the comment section of your blog. Please note the code may vary for each template so try to find a similar code. search for the following lines of code.
<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='comment-body-author'>
<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>
You have to add Blue codes in your html in the way i have shown above between the codes.I hope you will be able to do it.
Now how to style the comment part.
1. background: #ffffff; can be replaced by background: url(http://link_of_your_image.jpg) ;
2. change the border by setting it as higher value if you need a thicker border or make it as 0px if you don't need it. ( border: 2px solid #666666; )
If you like this article then please subscribe to Our feeds and Like us on Facebook for Future Updates. Thank you.
Follow :
Facebook
Twitter
Google+
Like the post? Never miss another. Get all our posts directly to your e-mail. Subscribe to our newsteller today

0 comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1) Do not include links in comments as they will not be published after moderation !
2) Make sure that you "subscribe by mail" to get notified to reply to your comments.
3) Please do not Spam... Spam comments will be deleted immediately upon our review.

Proudly powered by Blogger