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:
- Go to Blogger Dashboard > Layout
- 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
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"