Blogger Recent Comments + Avatar + Post Title

2016.9.26 Update: Now new version V2 has released, please go to this page for installation: "Blogger Recent Comments V2__Avatar + Post Title + HTTPS".

Recent Comments is a common and essential widget in Blogger blog. Sometimes you`ll find it comes with "Avatar image", but you`ll hardly find it comes with "post title section", as which is not an easy technique.

With information of post title, it`s very easy to identify where the comment is from, which will be a very handy function, so that`s why I made this widget. Please let me introduce some special features firstly, or you might move to section [B. Installation Code] for the installation procedure.

A. Special Features

1. Comment Toggle

Each comment will show summary by default. When the mouse hover it, the indicator symbol "▼" appear. By pressing the summary area, it will show the full comments.


2. Deleted Post

Normally if one post is deleted, all comments in that post will still exist in the feed, which means the recent comments widget still could read these comments.

To avoid such discrepancy, in my widget, these comments will show "this post has been deleted" in the post title section, to remind you to delete those comments accordingly from Blogger dashboard.


3. Different Avatar Image

For each commenter, this widget will show different avatar image by individual identity accordingly:

• Custom Avatar
• Blogger Logo (blogger account w/o custom avatar)
• Open ID Logo
• Anonymous Logo

B. Installation Code

Please refer to the following steps:

1. Go to Blogger Dashboard > Layout
2. Click on Add a Gadget > HTML/JavaScript
3. Copy and Paste the code below:

Before saving, you might want to modify some parameters. Please refer to the LETTER NAME above:

E: the red number 1 means to show comments from no.1 comment

F: the red number 5 means to show 5 comments in this widget

G: how many characters to show in each comment

H: the width of Avatar image (in pixels)

I: you could replace the blue texts with your custom Blogger Logo url

J: you could replace the blue texts with your custom Open ID Logo url

K: you could replace the blue texts with your custom Anonymous Avatar url

L: the red texts could be customized

M: the red texts could be customized

N: you could use custom character to expand comments

O: you could use custom character to collapse comments

C. CUSTOM CSS

If you would like to customize CSS, please refer to the GREEN remark in installation code.

For example, if you would like to change the style of Avatar image, then find /* avatar image */ :

• border: if you don`t need border, you might change as "border: none;"
• border-radius: adjust the number "10" larger or smaller, then you`ll see the shape of Avatar become rounder or squarer
• box-shadow: just change the parameter, then you`ll see the difference

D. FAQ

Q1: Why I couldn't see any comment?

Ans: Please check some settings in your dashboard:

• Go to Blogger Dashboard > Settings > Basic > Permissions > Blog Readers > be sure it`s "Public" here
• Go to Blogger Dashboard > Settings > Basic > Other > Site feed > Allow Blog Feed > be sure it`s "Full" or "Custom" here
• If the setting above is "Custom", be sure the settings of [Blog Comment Feed] and [Per-Post Comment Feeds] are both "Full"