Image may be NSFW.
Clik here to view.
Previously, we learnt how to create logo and we also added a menu to our Simple Blogger Template. This post is from one of my friend who wants to learn comment forms better. We will learn a series of comment form tweaking to make it look elegant and beautiful. Before, even starting the tweak, we need to definitely have a working comment form. Most people prefer an embedded comment form.
Though, in my blog I haven’t used the default comment for many reasons. That is a discussion out of the topic here. Many people prefer keeping the Blogger’s default comment system for their blogs. I’ve not got time to look into Blogger comment form because I don’t have one in this blog. But, we will work from this post and some of the posts in the future to get a professional Blogger comment system.
Side note: Many custom Blogger templates out there don’t have a working embedded comment form. This is the case with our on going Simple Blogger Template designing.
PREVIOUS MISSION – Mission 10 – Professional menu and Logo for Blogger.
NEXT MISSION – Mission 12 – Restyling the Blogger header section to make it professional.
MISSION 11 OBJECTIVES:
1. Understanding the Blogger Comment System.
2. Bringing back the embedded comment form if it doesn’t appear.
EXPLANATION:
Understanding Blogger Comment System:
Just upload our previously designed “Simple Blogger Template” by creating a test blog. Go to Template > Edit HTML > Expand the code > Search for the following code:
Code for complete Comment System
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<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>
<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'>
<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>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
That is the complete “Comment System” data used in our “Simple Blogger Template“.
There is a bug in the comment form, it doesn’t have an embedded comment form appearing on a click to post the comment nor does it appear as embedded as it should usually show. We will fix it soon. Just observe the code above. We will dissect the code and understand them better.
Code Explanation:
Code 1) The comment system loop starting:
<b:includable id='comments' var='post'>
//Comment System Data
</b:if>
The loop above indicates that it belong to comments and on posts. id=’comments’ is the id used to refer to the complete comment system.
We also have a CSS in place for that id.
#comments {
margin: 20px 20px 0px 20px;
padding: 20px 20px 20px 20px;
text-align: left;
background: #000;
color: #fcfcfc;
}
#comments a {
color: blue;
}
To make the #comments work, we have used a <div> tag: <div class='comments' id='comments'>
Code 2) Loop says Post Allows Comments
<b:if cond='data:post.allowComments'>
The above code is the loop which says that it allows comments on the posts. Simple!!!
Code 3) Code to show number of comments
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
That complete code would display you the number of comments on each post. This is again a if loop to check whether there is only one comment or more comments.
The <data:commentLabel/>: is used to display the message Comment:
The <data:post.numComments/> is used to display the number of comments.
The <data:commentLabelPlural/>: display the message Comments:
Code 4) Tabular Comments
<dl id='comments-block'>
This is the start of the comments you post. <dl> and <dt> tags are used to represent a more semantic tabular structure and arranged format of the comments you post. Web designers love tabular data and <dl> <dt> tags are used to help them and is preferred against using HTML <table>.
Code 5) Start of the Loop to check the user entered Comment data
<b:loop values='data:post.comments' var='comment'>
Code 6) The complete loop and table of comments which appear on your posts:
<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>
<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'>
<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>
The code <b:if cond=’data:comment.authorUrl’> is used to check if the comment has any Author links.
The code <a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a> says that put an author link entered while commenting against the author name which is again entered.
The code <data:commentPostedByMsg/> is used to display the message “Comment Posted by”
The code <b:if cond=’data:comment.isDeleted’> is used to check whether the comment was deleted as a part of comment moderation, so that a comment deleted message can be displayed.
The code <data:comment.body/> is used to display the actual comment data entered by the users.
The code
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
is used to display the comment permalink with comment timestamp.
The comment permalink looks something like:
http://yourblogname.blogspot.com/2012/05/your-article.html#comment-839888
The code <b:include data=’comment’ name=’commentDeleteIcon’/> is used to include a comment delete icon to delete the comment.
Code 7) Go to comment form on a click
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
This is a link which takes you to the comment form with comment form fields by clicking on it.
The text used to display this link is “Post a comment”
Code 8) To show the backlink below the comment form.
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
This code is basically not related to comment system, but since it is within the div tag, I don’t want to leave that behind.
Side note: We are not covering the THREADED COMMENT SYSTEM today.
Code to show the number of comments on home page
This is the next bit of code which enables the bloggers to display the number of comments on their non-post pages. This is simple to understand if you have understood our previous codes.
Search for the below code from the Template HTML:
<!-- DISPLAYS NUMBER OF COMMENTS ON HOME PAGE -->
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<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 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
The code <b:if cond=’data:blog.pageType != "item"’> checks whether it is not a post page.
Before ending, you can find the comment system CSS by the name:
/* ===== COMMENT SETTINGS ===== */
in the template.
Bringing back the embedded comment form if it doesn’t appear(Enabling Embedded Comment Form in Blogger):
Remember, we had already explained the the above comment system has a bug. The bug is nothing but it doesn’t display the embedded comment form below the post or article pages.
IMPORTANT: Take a Backup of your Blogger Template before attempting the steps below:
Step 1: Go to Blog > Settings > Posts and Comments > Make the below changes:
Clik here to view.
Step 2: Go to Template > Edit HTML > Expand Widget Template.
Step 3: Search(Ctrl+F) for the following code:
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
Note: Can be found in the above codes we discussed(Code 7)
Step 4: Replace the found code with the following:
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
Step 5: Save the template
What if you don’t find that code?????? Some templates don’t have em.
Don’t worry!! We have a solution for it.
Continue till Step 2)
Step 3) Search(Ctrl+F) for the following code now:
<b:include data='post' name='comments' />
Step 4) Replace that code with the following:
<b:include data='post' name='comments' />
<b:include data='post' name='comment-form'/>
— to be continued —
Clik here to view.
The post Understanding Blogger Comment System and Embedded Comments |Mission 11 appeared first on Itechcolumn.