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.

Comment style

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



Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

Wow..its great ! This is a new trick for blogger. Do you mind if I repost the code on my blog PV?

@Share With Irfan
As stated in the Footer of this blog, you are free to do anything with the code , with or without attribution

Aakash said...

hmmm...useful! great one prayag!

Unknown said...

i, this tutorial very great,,, can I ask you...
how to add syntax highlighter same with you?
Thanks.

@Ari
Check out this tutorial

Sidharth said...

@Prayag Verma Bro You Are Really Great !!

Anonymous said...

Your mode of describing everything in this post is genuinely fastidious, every one be able to easily be aware of it, Thanks a lot.

Thanks for the great tutorial helped me a lot.