• Admin
  • Receive an Update

    You are Here in » » Expandable Recent Comments Widget for Blogger/Blogspot





    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 :)




    More Articles

    ADSENSE SCRIPT HERE

    Make use of Smilleys Codes

    Contact

    Oyo, Nigeria.

    08053151099

    [email protected]

    Mondays to Saturdays 09:00 - 18:00 (GMT +01:00)

    About

    Azeeztech is a Nigerian-based Tech. support platform where anybody can get free solutions to device issues & questions.

    Azeeztech

    Get notified on FB