How To Add Recent Comments With Avatars On Blogsite

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

In one associated with my prior tutorials about avatars, i have shared a tutorial on How To Create Multi Author Profile Widget With Avatars And Post Counts, now for anyone who would love to discover something more, here's a stylish The latest recent comments widget with avatars and comment excerpts. Besides supplying the alternative associated with exhibiting the actual commenters avatars, i'll manage how to modify the actual default impression with the confidential avatar, likewise.

Just isn't of which fantastic?

Let's get started adding it to your blog

Recent Comments With Avatar[images source:www.acebangsam.us]

1. Login to your bloggerpanel admin
2. Click On Layout » add HTML/Javascript
3. Copy and paste the code below.
4. Save it and you are done!

<style type="text/css">
.recent-comment        { margin-bottom:10px; padding-left: 24px; }
.recent-comment-admin  { background-color: #F4F4F4; }
.recent-comment-ico    { margin-left:-20px;margin-top:4px;float:left;margin-right:3px;}
.recent-comment-header {}
.recent-comment-body   { padding-right: 4px; font-size: 95%;}
.recent-comment-footer { font-size: 85%; }
</style>
<script src='//googledrive.com/host/0B9knqug_HKy5MkRLanlPdWppOGs/recent-comments-withavatar.js' type='text/javascript'></script>

Customization

There are a few CSS explanations at first, and this can be modified while you enjoyed. After that right now there arrives javascript value as well as configurable parameters.

This is the list of the variables as well as a short explanation..

numRecentComments: //how many comments you want displayed
numPerPost: //how many comments per post max is the goal (will fallback when necessary)
maxCommentChars: //how many chars max in excerpt of comment
maxPostTitleChars: //how long post title can be, or 0 (=don't cut title)
txtWrote: //header text, links to comment
txtMore: //footer text, links to comment
txtToolTip: //text to be shown when mouse hovers over comment
txtAnonymous: //"Anonymous" username localized, or empty if English text "Anonymous" is to be used
getTitles: //if true, fetch titles from post feed; if false, titles are generated from url
trueAvatars: //if true, uses Blogger profile images from comment feed,
urlMyAvatar: //especially if trueAvatars = false, set here the url to your avatar image
urlMyProfile: //if you don't have a profile gadget on page, put your profile url here!
urlAnoAvatar: //anonymous avatar,
maxResultsPosts: //can be empty or &max-results where is number of posts to get from posts feed
maxResultsComments: //empty or &max-results where is number of comments to get from comments feed

Configurable factors.

cropAvatar: crop avatar to square (true) or stretch (false) to square
sizeAvatar: size of avatar in x and y direction, pixels
urlNoAvatar: comment feed offers the icon (Blogger logo) for those Bloggers who have not set their profile image.

It is possible to override your icon using this type of placing.
txtWrote, txtMore and txtTooltip
Most of these may be just typical text message. In the event txtWrote will be typical text message, it can be preceded by commenter identify. Consequently in case txtWrote will be "wrote... inches the actual result can be Jason published..., in case Jason ended up being commenting.

All texts can also have simple variables, which are: [title], [user], [date], [time], [datetime] and [date format]. [title] is substituted by Post title, where comment belongs. [user] is substituted by commenter name. [date] displays date in current (user's computer's) locale, [time] displays time and [datetime] date and time in user's locale.
format in [date format]

In format some character combinations are substituted:
yyyy=long year, yy=short year, MM=month(01-12), dd=monthday,
hh=hour, mm=min, ss=sec (time/hours in 24-hour clock)
but format can contain also other text/characters (which are displayed as is).
"Written [date MM/dd/yyyy hh:mm]" could become "Written 21/03/2015 09:15".

The script has very good configuration defaults, so if this all was too complicated for you personally, you don't have to cherish it. If you don't have a profile gadget in your page, put your profile url from the code I provided, and you're good to go. If you have a new profile gadget, then it's not necessary to change anything, just backup and paste.

Credit for the script: http://yabtb.blogspot.com

Go to Link