• Expandable Recent Comments Widget for Blogger/Blogspot




    This Expandable Recent Comments is a very accessible widget that can be collapsed or expanded through user interaction, so that now, we don't have to click on the commenter or post title link in order to see the content of a comment.
    recent comments widget, blogger gadgets, blogspot tricks

    The expanding content can be shown or hidden by clicking on the plus/minus icon or by pressing the "Show all" or "Hide all" button at run time.
    How To Add The Expandable Recent Comments Widget to Blogger

    Step 1. Log in to your Blogger dashboard and go to Layout > Click on "Add a Gadget" link


    Step 2. From the pop-up window, scroll down and click on the HTML/JavaScript widget


    Step 3. Copy and paste this code inside the empty box:
    <style type="text/css" media="screen">
    .row-aa {        background: #f2f2f3; }
    .row-bb {        background: #F8F5F1; }
    .row-div { 
      margin:0px;
      padding:5px;
    }
    .comment-header {
      font-size:0.9em;
    //  border:1px solid #E0E0E0;
    //  background-color:#F3F3F3;
      padding:4px;
      margin-top:10px;
      margin-bottom:5px;
    }
    .comment-box {
      margin:0px;
      padding:0px;
      font-size:0.9em;
      height:500px;
      overflow:auto;
    }
    .comments1  { 
    //  background: #F3F3F3;
      padding:3px;
      border-left:1px dashed #A6A6A6;
      color: #888888;
      font-style: italic;
      padding-top:4px;
      margin-bottom:5px;
    }
    .comment-footer {
      text-align:center;
      font-size:0.9em;
      padding:4px;
      margin-top:5px; 
    }
    </style>

    <div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>

    <div class="comment-box">
    <script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
    <script type="text/javascript"  src="http://helplogger.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
    </script>
    <script type="text/javascript"  src="http://helplogger.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
    </script>

    </div>

    Note: Replace http://helplogger.blogspot.com with your blog/site address.

    Step 4. Save your widget and you're done!

    Enjoy :)

    Click here to like our Facebook Page, and here to join our Telegram channel to be among the first to receive update.








    0 Comments:

    All comments are moderated. Read Commenting Terms And Conditions.