[Howto] Add a (disclaimer) message before Disqus comments

We all know Disqus is great, but this doesn't mean it could be better. One feature that Blogger users are loosing moving from the standard comment system to Disqus is the ability of displaying a message before the comment list. Generally speaking this message is very useful because blog authors can use it to define common rules for commenting or a sort of disclaimer.


Publishing this message is very easy with the original Blogger comment system. It is just enough to visit the blog setting page and write your message in the proper box as shown in the picture. Blogger saves this text within a template variable named data:blogCommentMessage, remember it because we will use it in a while.

Now you need to convince Disqus to let you show the message and this is the most difficult part of the tutorial. When Disqus script is loaded, it simply hides the original comment structure. To say it in a more HTML way, it is setting the display style of the element ID comments to none. Of course, everything contained inside this elements is also hidden including the comment-post-message that is actually the place where the data:blogCommentMessage lives.

Howto fix it

The solution is rather easy but it requires a small modification of your template, so proceed only if you know what you are doing and anyway never before you make a full back-up. As I said, open your blogger HTML template (Template > Edit HTML) and be sure you thick the "expand widget code". Now search for the string id='comments'>. You should find two instances, one is for your desktop template and the other is for the mobile one. Just before this line, add this line of code

<p class='comment-postmessage'><data:blogCommentMessage/></p>

After you add this line, your template should look similar to this code below where the highlighted line is the one you have just added.

<b:includable id='threaded_comments' var='post'>
  <p class='comment-postmessage'><data:blogCommentMessage/></p>
  <div class='comments' id='comments'>
    <a name='comments'/>

Repeat the same change for the second instance, in order to display the message also for the mobile version and you're done!