Hi bloggy reader,
As a blogger, we can call ourselves as an admin or administrator. Why? That's because, we control everything all the maintenance in our blog, from: picking the niche topic of our blog, posting contents, choosing blog themes, gathering traffic, checking statistic,replying reader questions, and last but not least, to highlight author comments. So we, as a blogger, must be proud for ourselves, because for once in the lifetime, we are the boss of one institution, blog.
Maybe some of you don't understand about what administrator really is. Okay, let me give you the definition of Administrator.
Administrator means a person responsible for running technically advanced information systems (taken from Wikipedia)But in my own words, i can define that administrator means a person with the ability of programming language who controls the activity or operation of the system.
Sorry, i am out of the topic. In this article i want to show you about how to highlight author comments with a unique/different background color from the reader comments. Okay, let's start the tutorial guys!
How to highlight author comments on Blogger?
1. Log in to Blogger
To begin this tutorial, now go to Blogger.com and Log in to your Blogger account.
2. Go to Setting
First things first, we have to make sure that the comment form in our blog is set to visible. Now in the Dashboard, pick one of your blogs and then press the Setting button. By pressing this Setting button, you will enter the new page regarding the whole configurations of your blog.
3. Go to Comments
In the Setting Page, there are sub-tabs that can be switched. Now press the sub-tab Comments. After landing to the Comment sub-tab, in the first option, you will see the option Comments, now give a tick at the option Show. By doing so, the comment form will be enabled in your blog.
4. Save the Change
Save the setting and proceed to the main steps.
Editing blog template to highlight author comments
5. Go to Edit HTML
After finished setting up the comment form on our blog, now it's time to edit our blog template. Now switch the sub-tab to Edit HTML.
Before attempting to edit your template, you might want to save your current template as a back up template.
Near the template box, you can see a small box titled Expand Widget Templates, now give a check mark to that box.
7. Find the code
After finished generating the full template code of your blog, now find the code section below (CTRL + F):
<dl id='comments-block'>
After locating the code on number 4, now scroll down little bit. Right after the code section <dl id='comments-block'>, you will see the remaining widget codes that control the interface of comment form in your blog. Look at the code below:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> on <data:comment.timestamp/>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
8. Paste the Code
Now by using the mouse cursor, block the code section from <b:loop values='data:post.comments' var='comment'> until the code </b:loop> and replace it with the code below.
<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.authorUr
l'>
<a
expr:href='data:comment.aut
horUrl'
rel='nofollow'><data:commen
t.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.b
ody/></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>9. Find the CSS
After replacing the script code that controls the interface of comment form above, press Ctrl + F again to enter the Find mode. Now find the code below:
#comments-block.comment-
body {
margin:.25em 0 0;
}
#comments-block.comment-
body p {
margin:0 0.75em;
}
body {
margin:.25em 0 0;
}
#comments-block.comment-
body p {
margin:0 0.75em;
}
10. Paste the new CSS ID for comment box
After locating the code on number 6, now copy the code below and then paste it after the CSS ID #comments-block.comment-body p {margin:0 0.75em;}. By adding this code in your blog template, the interface of author's comment will be separated with the comment from the readers using specific code written in CSS. That means, from now on, your blog can highlight author comments, and show it differently with reader's comments.
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0.75em;
padding:5px 10px;
border:1px dotted #000033;
background:#ffffcc;
}
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0.75em;
padding:5px 10px;
border:1px dotted #000033;
background:#ffffcc;
}
11. Save the Change
Now save the template and now you can see the result. As you can see in the comment section of your blog articles, when you reply to reader's comment, your comment will appear in a different background color than other reader's comments.
Hope this method to highlight author comments i already showed above can work to your blog. Certainly, it can help readers/visitors see whether their comments have been replied by the admin or author, or not.
Share This Article to Other People Across the World !
Thanks!
Get the fresh update from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
2 comments:
sorry, but where is the red code?
Oh sorry kintaro, i'll fix this post ASAP. Anyway, thanks for letting me know this error..
Post a Comment