Dynamic Views type Comment Style

Dynamic Views are one the latest and greatest offering from the people at Blogger. I really liked its Comment style , the one-click and display and hide feature. After doing a bit of research I was able to implement it in normal/default Blogger templates.

See Demo


To implement this in your Blogger Blog:


1. Go to Blogger Dashboard.

2. For New Interface ,go to Templates > Edit HTML
For Old Interface ,go to Design > Edit HTML

3. Now tick the Expand Widget Preview option & search for the term </head> tag and insert the following code Before it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
     $(document).ready(function() {
          // hides the comments elements as soon as the DOM is ready
          $(&#39;#comments,.avatar-stock img&#39;).hide();
          
          // view the comments on clicking the noted link  
          $(&#39;.readCom&#39;).click(function() {

           if ( $(&#39;#comments&#39;).is(&#39;:hidden&#39;) )
           {
               $(&#39;#comments&#39;).show(&#39;slow&#39;);
            }
          else
           {
             $(&#39;#comments&#39;).hide(&#39;slow&#39;);
               }
                 return false;
          });

  });
  </script>

and now search for the term class='comments' and insert the following code before/above it.

<span class='readCom'><a href='#'><data:post.numComments/> Comments</a></span>

Note: Exclude the 1st line if you already have jQuery present in your template.

What this does: It Inserts a link which displays the number of comments just after the end of the post which can be clicked to display and hide comments similar to the Dynamic Views templates. When the page loads the Comment section is hidden (See Line 5).

This will hide the whole comment section, If you only want to hide the comments and not the comment Box (where you enter the comments ) then replace #comments with #comments-block in the above code.

One thing ,to implement this you will have to have comments embedded under posts, change the settings at Settings > Comments > Comment Form Placement.

Thanks to BloggerMint's Experimental templates for inspiring me