New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



Adding Expandable Recent Comments Widget In Blogger


It's been a couple of days when  I was out in my blogging career and now I'm back with my computer's table to make another great post. Today, I will share to you a trick on how to make your recent comments more attractive and professional in its looks. I would say that the code that I am going to share with you is credited to helplogger and I made some sort of innovations in order to present it in a more unique manner.

This Expandable Recent Comments widget is a very accessible  for it can be collapsed or expanded through  your user's 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.

The expanding content  of the comment can be shown or hidden by clicking on the plus/minus icon or by hitting the "Show all" or "Hide all" button at run time.
expadable recent comment widget


How To Add The Expandable Recent Comments Widget to Blogger


Step 1. Log in to your Blogger dashboard
Step 2. Hit the  Layout  button
Step 3. Click on "Add a Gadget" link
Step 4. In the pop-up window, scroll down and click on the HTML/JavaScript widget
Step 5. Copy and paste the code below and paste it 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://bloggingtipsandtrix.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://bloggingtipsandtrix.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>
</div>


Customizations:


  • Replace http://bloggingtipsandtrix.blogspot.com with your blog/site address.
  • Replace 1px  (font size) with your own desired font size, bigger number means bigger size of the font
  • Replace dashed  with your desired border styles, click link to see different border styles.
  • Replace #A6A6A6 with another hexadecimal color that would most fit your blog's theme.
  • And lastly, change the phrase Hide all and Show all with another synonyms related to that phrase. 



  • Step 6. Save your widget and you're done!
    Happy Blogging Buddies!!!

About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...