Recently we released an update to Blogger’s commenting system that enables people to directly respond to comments. This capability is known as Threaded Comments. We are pleased to see quite a few people diving in and writing tutorials, including a screencast. It’s wonderful to see the enthusiasm of our developers!
In this post we will look at what are the changes required to modify a custom template to enable Threaded Comments, once you have fulfilled the requirements outlined in the Threaded Comments announcement post on Buzz.blogger.com. We will then look at how to customise the look and feel of the Threaded Comments using just CSS, and also have a quick peek at alternatives.
Please note, these instructions may not work if your blog’s template is heavily customised. Your template may possibly missing some of the
b:includable
s that the instructions below depend on. Please try the following instructions on your template, but if they don’t work come to our Blogger Developer forum and get some help with patching your template. The first step is to Edit the HTML for your Template, which can be found inside Settings under the Template tab. You must make sure to expand the Widget Templates, as we need to modify the main Blog Widget Template. To find the main Blog Widget code, search for the following Blogger Layouts Template code:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>Inside the
b:widget
are a series of b:includable
blocks. These act a lot like functions in programming languages, in that they can be called from other b:includable
blocks to insert chunks of HTML. The only special block is the includable called main
, which is where the Layout Template engine starts when rendering the Widget’s content. If you don’t see content inside the b:widget
, you need to click the Expand Widget Templates radio button above the edit area.The Layout Template should include the following code:
<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if>The interesting part is that we have a fork here, implemented as a
b:if
conditional block, that decides whether to render the comments as threaded or not. The need for this split can be seen on the Threaded Comments announcement on Buzz.blogger.com. As a quick aside, if you don’t have this code, but instead just have something like the following:
<b:include data='post' name='comments'/>Then you can get threaded comments by replacing this b:include with the above logic block, assuming you fulfill the requirements laid out in the Threaded Comments announcement post on Buzz.blogger.com.
Now you can look at the implementation of the threaded_comments includable by searching for the following line of code:
<b:includable id='threaded_comments' var='post'>This code is responsible for rendering the actual threaded comments to screen. You can choose to override this code block to customise the look of your comments, but it is worth noting that if you do, you won’t get updates to this functionality as we change the implementation in the future.
There are two new data members we have introduced with this feature release that you can use to render comment threads:
data:post.commentSrc
This is the source to the javascript library that handles actionsdata:post.commentHtml
This is the rendered HTML for the comment thread
.comments blockquote { border: 1px solid black; color: white; font: Helvetica; } // draws a border around comment bodies, sets the text font and colour .comments .inline-thread li { list-style-type: decimal; } // numbers repliesFinally, you can implement your own version of Threaded Comments by walking the
data:post.comments
directly. This will contain all the comments, ordered by time of comment, now with an optional extra field data:comment.inReplyTo
which will contain the id
of the parent comment, if there is one.If you have any questions about how to customise your Blogger Comments, please feel free to drop by the Blogger Developer Forum. We’re glad to help!