The Expandable Recent Comments is a very approachable and easy widget that can be collapsed or expand the comments by user interaction, so that there is no need to click on the commenter or post title link to see the content of a comment.
See also: How To Add Disqus Facebook and Blogger Default Commenting System Together
This Expandable Comments widget shows only recent comments and there is button to show all or hide all comments at the top od widget.
See also: How To Add Disqus Facebook and Blogger Default Commenting System Together
This Expandable Comments widget shows only recent comments and there is button to show all or hide all comments at the top od widget.
 |
HOW TO ADD EXPANDABLE RECENT COMMENTS WIDGET
- Go to Blogger dashboard > Layout > Add new widget.
- Select Html/Javascript for adding a new widget.
- Paste below code to Html/Javascript widget.
<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 == 'Show all') { unfold_all(this); this.value='Hide all'; } else { fold_all(this); this.value='Show all'; }" 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://web4services.blogspot.com//feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript" src="http://web4services.blogspot.com//feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>
</div>
- Now replace http://web4services.blogspot.com/ url with your blog address.
- Save your setting, That's All, Happy blogging.....
Post a Comment