Pages

Thursday, December 29, 2011

120

Son of the better recent comments gadget

Here is the newest version of my recent comments gadget (here is the previous version). Previous version still works, so if you have it installed, you don't have to update if you don't want to.

What is new?

Earlier this month Blogger added comment authors' avatar (profile image) urls to comment feed. This new version uses those urls to get the avatars, instead of using my google appengine application to get avatars from profile pages, as the previous version does.

As an added bonus in this new "Son" version, avatar size can be adjusted easier using a configuration variable, and I give you two additional CSS styles for the gadget.


Features of my recent comments gadget

You can configure:
  • number of recent comments displayed
  • max number of comments per post (so one post's comments don't "flood" recent comments)
  • length of comment excerpt
  • translation or own version of gadget's texts
  • customize what is displayed.
Also:
  • blog author's comments can be styled differently (CSS)
  • display comment author's site favicon, comment author's Blogger profile image, or mystery man icon (configurable) for non-registered commenters
  • does not have the bugs the recent comment gadget that Blogger offers has.
The newest version, "Son of the better recent comments gadget", adds the following new features:

The Script

Add a HTML/Javascript gadget to your blog, and paste the following code into it. If you had previous version installed, replace it with this, and make the same configuration changes you made to the previous version. I'm sorry that there is no automated upgrade, but this is no rocket science, I'm sure you can do it. :) Know your way around.

Data provided by Pastebin.com - Download Raw

Script configuration

There are some CSS definitions at first, which can be changed to your liking. After that there comes javascript code and configurable variables. Here is a list of the variables and 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 avatars (Blogger profile images) from comment feed, not just the blogger favico [B]
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, you can change from mystery man to a custom one, if you want, possibly this
maxResultsPosts: can be empty or &max-results=### where ### is number of posts to get from posts feed to get titles
maxResultsComments: empty or &max-results=### where ### is number of comments to get from comments feed

New configurable variables in "Son"

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. You can override the icon with this setting (default: ).

txtWrote, txtMore and txtTooltip

These can be just normal text. If txtWrote is normal text, it is preceded by commenter name. So if txtWrote is "wrote..." the result would be Jason wrote..., if Jason was 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 11/03/2011 08:30".

Again, the script has good configuration defaults, so if all this was too complicated for you, you don't have to care about it. If you don't have a profile gadget on your page, put your profile url in the code I provided, and you're ready to go. If you have a profile gadget, then you don't have to change anything, just copy and paste.

Styles for different avatar sizes

Default size for avatar is 16 pixels. If you change, the CSS might need some adjusting. In the picture in the beginning of this post there are three examples, first the default (16 pixels), then 20 pixel avatars, and then 24 pixel avatars.

Styles for 20 pixel avatars:


...

var sizeAvatar = 20;

Styles for 24 (and larger) avatars:


...

var sizeAvatar = 24;

This gadget is installed on this blog with 16 pixel avatars. My MS-potilas blog has this gadget with 20 pixel avatars.

If you set the urlNoAvatar, you might want to change the icon also in the comments block, where the actual comments are (below the post). I have a hack for that, too, see: Use new blank Blogger profile picture in comments.



Problems in Internet Explorer?

By default many Blogger templates have set Internet Explorer to use EmulateIE7. IE7 emulation has some bug with blog feeds in foreign languages that can make the gadget not show properly. You can fix this by editing the template, find line:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
(or something similar with text "EmulateIE7"), and change it to:
<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

Update Jan 2nd 2012: Deleted comments (This post has been removed by the author.) no longer have "alternate" link in comment feeds, like they used to, which can cause the recent comments to disappear. I modified the script to prevent this: line 124 is modified and line 131 is new.

June 6th 2012: Optional hack: If you don't want to show your own comments in recent comments, check this hack.

August 1st 2017: To fix avatars, please change lines 157 and 158 (article code is updated).



[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

120 comments:

fowziey said... [reply]

Hi,
I'm using your previous gadget. It works flawlessly. Just tried this new version but all avatars are missing except mine (admin). I wonder why...

MS-potilas said... [reply]

@fowziey
Hi, thanks for your comment. That sounds strange... I looked at your 54BLOGGER blog's (very stylish blog!) feed and it contained the necessary thumbnail urls, so it should work. Some (errorneus?) configuration in the beginning of the script maybe?

Do you see the recent comments gadget on this blog and do the avatars show? This blog uses this newest version (and my other blogs do, too, and all seem to work).

Does browser's javascript console show any errors?

If the problem does not resolve, you can of course continue using the previous gadget.

fowziey said... [reply]

@MS-potilas
Thanks. I've just tried again after read your quick reply, also your latest post. I guess cache cleaning do the trick in my issue and definitely nothing to do with your superb script. Now it works.

I'm not good in scripting and today I've found who are really generous sharing his knowledge, and maybe can teach me in future.. :)

Ilia Konovalov said... [reply]

Fantastic work man !
I have installed it and it worls just brilliant ,i tried i n IE browser but it does't show anything , maybe i have to do something in setting. Thanx again!
http://cool-tool.blogspot.com

MS-potilas said... [reply]

@Ilia Konovalov
Hi, and thanks. I checked your blog (great photos!), and for some reason the IE7 compatibility mode, which is default in Blogger templates, causes the recent comments gadget not to show on your blog. There is a solution in this comment: changing the EmulateIE7 to EmulateIE8 in the template. I myself have edited that template line in this blog to read:
<meta content='IE=EmulateIE7; IE=EmulateIE8; IE=EmulateIE9' http-equiv='X-UA-Compatible'/>
that selects the highest possible emulation. That should work for you, too.

Anonymous said... [reply]

Awesome work on this gadget. :)

Already using it on my 2 blogs.

I had to translate it to my language but works perfectly.

I also made a post about it with links to this post and your blog.

Hope it's OK with you. :)

MS-potilas said... [reply]

@OCP
Hi, glad you have liked this. And a repost linked here is OK, thanks.

Admin said... [reply]

Thank you very helpful

Ariful Islam Shaon said... [reply]

:) ;) :P :D :( and ;( : these emoticon doesnt works graphical ly in my blogger blog. Is there have any option to show theme graphically like yours? :)

MS-potilas said... [reply]

@Blogger Shaon
Hi, smiley emoticons where one of the first hacks I made on Blogger. It is quite simple and customizable hack, plain javascript, see article here.

Ariful Islam Shaon said... [reply]

@MS-potilas
Hi, Thanks a lot for helped my! now graphical emoticon working on my blog post and comments.
You are well come to my my @ http://www.bloggershaon.com/

Thanks again :)

Shaun Hotchkiss said... [reply]

Hi dude, I've been using this recent comments hack (or an earlier version, I don't remember) for a while. It is great, thanks again for writing it.

However, I just opened up comments on one of the "pages" we have. As soon as I added a comment on the page the recent comments stopped loading. When I deleted the comment it came back. Is this a known bug? It isn't to much of a problem for us as I've just gone back to disallowing comments on any of the permanent pages and all is working fine.

I notice that you don't have any of these pages so perhaps you haven't noticed yet. Just thought I'd give you a heads up.

MS-potilas said... [reply]

@Shaun Hotchkiss

Hi, this was not a known bug, many thanks for discovering it. I have no pages with comments on my blogs, so I had not noticed this. I fixed all three gadgets. Fix is easy, search for line (it is line number #141 in this "son of recent comments"):

postTitle = hrefPost.split("/")[5].split(".html")[0].replace(/_\d{2}$/, "");

and change it to:

if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");

I've updated the source code for all my three recent comments gadgets.

Shaun Hotchkiss said... [reply]

@MS-potilas

Stellar work as usual. Thanks man. It now works without fail.

Shaun Hotchkiss said... [reply]

@MS-potilas

Actually, while I'm here... I don't know if you do requests and if you don't that's perfectly cool. But if you made an "edit comment" hack you would be the hero of all of blogger-ville forever! Thought I'd just put that out there in case you're looking for a new project.

Thanks again for the recent comments hack.

MS-potilas said... [reply]

@Shaun Hotchkiss Thanks for the idea, ideas are always welcome (other thing is if I can be implement them, so I don't make any promises). Blogger comment editing would really be great, but not easy to implement. I have one vague idea about possible implementation, maybe I'll try to refine it a bit :)

Ismail Sosse Alaoui said... [reply]

hi admin, thank you very much to share this gadget which is very usful,
i have just one request: while i'm customising style of gadget (i want to float author name to right, in result i find that avatar float also to left) please can you help me to do it...please please please please...
thanks to answer ;) :)

MS-potilas said... [reply]

@Mr Admin Maybe you could use "text-align:right" instead of "float:right"? I really don't know CSS very well so I'm not sure if I can help.

Seth Mason said... [reply]

Hi MS-potilas,

Thanks for the gadget! I'm having trouble getting the post titles to appear, however. I've tried both "var getTitles = true" and "var getTitles = false". Any suggestions?

Thanks again!

MS-potilas said... [reply]

@Seth Mason Hi, by default the post title shows only in a tooltip when you hover the mouse over the recent comment gadget (you can try it in this blog). If you want post titles visible, you should edit txtWrote variable, for example like this:

var txtWrote="[user] wrote on [title]:";

Seth Mason said... [reply]

@MS-potilas Worked like a charm! Thanks so much!

Seth Mason said... [reply]

@Seth Mason Also, how do you format for US time (1-12 AM/PM)?

MS-potilas said... [reply]

@Seth Mason
There's now this in txtToolTip variable:

"[date MM/dd/yyyy hh:mm]"

which is replaced by date: "month/day/year hours(24h):minutes".

You could change that part of the variable to:

"[date MM/dd/yyyy] [time]"

which gives you month/day/year followed by time formatted by locale preferences (user's computer/browser locale settings). You can also try "[datetime]" and "[date] [time]", which use locale formatting.

Dates and times can be used also on other variables than txtToolTip, for example in txtWrote.

Seth Mason said... [reply]

@MS-potilas How do I remove the date/time all together?

MS-potilas said... [reply]

@Seth Mason Edit txtToolTip variable in the code and remove [date MM/dd/yyyy hh:mm] part from it.

Seth Mason said... [reply]

@MS-potilas I ended up breaking my blog making other changes. :( The fix should be easy, but it's over my head. Would you be interested in earning a few dollars fixing it? I'm looking for someone who can do it ASAP.

MS-potilas said... [reply]

@Seth Mason I'm afraid I don't have such resources right now. I suggest you try posting your problem description into Blogger Product forum, there are many skilled fellow bloggers who are willing to help. I hope you get your blog fixed soon. :)

Ismail Sosse Alaoui said... [reply]

hi admin, can you create for all visitor top commentators with avatar widget thanks to answer

MS-potilas said... [reply]

@Mr Admin Hi, nice idea. Before I started implementing I did some googling and found this, maybe it would work for you: Top commentators widget with avatar for Blogger.

Ismail Sosse Alaoui said... [reply]

But this widget is obfuscated, and we are you visitors and we like your professional widget script please admin try to do it thanks to answer@MS-potilas

MS-potilas said... [reply]

@Mr Admin OK, I'll put that on my todo-list :)

Ismail Sosse Alaoui said... [reply]

I'm very happy thanks a lot to support us big generous developper, besides i invit you to see this link:
http://wpmu.org/top-commentators-plugin-wordpress/@MS-potilas

Eye Wanks said... [reply]

This is the first script for recent comments that allows more than 5 comments, thanks so much for that :) I have one request though, is there way to round the avatar image in this script? I was searching up other scripts and one of them offered that: http://www.helperblogger.com/2012/03/recent-comments-widget-with-avatar-for.html?showComment=1338497988569#c2324024602823959499
and his script is much shorter, any tips on how to do it? Thanks!

MS-potilas said... [reply]

@Eye Wanks
Hi,

rounded avatars can be done with some CSS, put this definition before line </style>:

.recent-comment-ico img {
border: solid 1px #000;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

You can of course adjust the style(s) to your needs. The other script looks shorter because it is packaged in an external .js file. :)

Eye Wanks said... [reply]

@MS-potilas
thanks so much for the prompt reply. The script you gave me indeed does round the avatar, but it has these dark edges that i don't want. i'm hoping to have a thin white border which i believe can be done through padding the circle, but my knowledge of css is too trivial. any tips? and thanks again.

MS-potilas said... [reply]

@Eye Wanks My CSS is also often a result of trial and mistake... But you could try to change these: change border color from black to light gray:

border: solid 1px #ddd;

or white:

border: solid 1px #fff;

or remove the border (might be the best):

border: none;


Change the shadow to lighter:

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);

Ismail Sosse Alaoui said... [reply]

Hi MS-potilas, i have a request to you, and i hope that you can help me...

My request is: i want to make for theses elements of the script:
- seprate avatar and author-name from header
to make customising easy in css part.
make font color of admin different from other visitor.
because i want make a style to this widget
please help me. thanks to answer

MS-potilas said... [reply]

@Mr Admin
Hi, I think you can target many of those things already. For example admin specific styles, just add .recent-comment-admin in front of the other selectors, here are some examples:

.recent-comment-admin.recent-comment-header a:link {color: #f00;}
.recent-comment-admin.recent-comment-header a:visited {color: #A66;}
.recent-comment-admin.recent-comment-body {color: #00F;}
.recent-comment-admin.recent-comment-footer a:link {color: #0F0;}
.recent-comment-admin.recent-comment-ico img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

(last one makes admin's icon round)

If you want to target the commenter name, then you can make this change: find:

var txtHeader = txtWrote;
if(txtWrote.indexOf('[')==-1)
txtHeader = authorName + ' ' + txtWrote;
else
txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

replace with:

var txtHeader = txtWrote;
authorSpan = '<span class="recent-comment-author' + clsAdmin + '">' + authorName + '</span>';
if(txtWrote.indexOf('[')==-1)
txtHeader = authorSpan + ' ' + txtWrote;
else
txtHeader = replaceVars(txtHeader, authorSpan, postTitle, cmtDate);

After that you can target the name using .recent-comment-author and .recent-comment-admin.recent-comment-author selectors.

If there's something else you would like to accomplish, tell me and I'll see what can be done.

Ismail Sosse Alaoui said... [reply]
This comment has been removed by the author.
Ismail Sosse Alaoui said... [reply]

I add that admin style doesn't work
please help me. thanks alot

MS-potilas said... [reply]

@Mr Admin
I've been quite good lately, thanks for asking :)

I'll answer this admin thing first: I think you should set the variable urlMyProfile, if script cannot get it automatically, it remains empty and author classes are not applied.

Nice design you're after. I would try some negative margins to get the divs etc partly on top of each other. But I'm really no good at such complex positioning :P

Ismail Sosse Alaoui said... [reply]

Good morning MS-potilas,
thank you very much to help me ...@MS-potilas

Anonymous said... [reply]

After going through what feels like a bajillion different gadgets to find what I was looking for you did it! I needed a gadget that had an avatar and ability to show the title with the comment. THANK YOU for the best recent comment widget on the web :)

Patrick Bromley said... [reply]

Hi - Thanks for this. My post titles won't show up. I'm sure I'm doing something wrong in coding because I'm clueless, but is there an easy fix? Thanks.

MS-potilas said... [reply]

@Patrick Bromley
Hi, they do show up on your blog. By default the post titles are not visible in the gadget, but show when you hover the mouse over the recent comment. It is set in "txtToolTip" variable.

You can change the txtWrote variable to show the post title, for example like this:

txtẂrote = '[user] wrote on &quot;[title]&quot;:';

Patrick Bromley said... [reply]

@MS-potilas Yes, I figured it out based on your reply to someone earlier. Thanks so much for your thorough answers to everything. This is great.

Unknown said... [reply]

Just installed this widget, too with the "circle" profile pics are recommended in one of your most recent posts.

I always loose and then find our website again. And whenever I do I go on a widget binge.

If I may suggest, adding an e-mail subscription option to "Yet Another Blogger Tips"? I'm always using one of four computers with one of five browsers so I can never keep track of my bookmarks and my RSS feeds are obscene.

However getting an email about a new post from a blog I appreciate and respect is never get missed!

Thanks for providing elegant solutions that work.

Ciao,

L

MS-potilas said... [reply]

@Laura @ hip pressure cooking
Hi, thanks for the suggestion. I added the email subscription option under the "Subscribe to" tab.

Unknown said... [reply]

@MS-potilas

Yay! Through another of your gadget hacks, I found out about BlogTrotter so I will definitely be using that as well to keep track of the rare good internet finds.

Ciao,

L

Thomas Marcum said... [reply]

recent comments works very good...thanks!

Faria Ahmed said... [reply]

This was an exclusive post which can help new bloggers and they must be use Blogger Recent Comments Widget for their blog.

Masa said... [reply]

Thank you for your great script that is working very fine on my blog!!!

Craig Scott said... [reply]

I am having an issue with the son of widget. When someone posts on an older story the comment widget stops working in IE but keeps working in Chrome.

If I go and delete the comment on the older story the widget starts working again.

Any idea how I can fix this?

If you look at my blog in each browser you will see what I am talking about.

http://torbaytoday.blogspot.ca/

Craig Scott said... [reply]

disregard my last post, got it fixed, changed the emulator IE7 to IE8 and fixed the problem

Anonymous said... [reply]

i've trying hard for the favicon. how to implement the avatar image to be site favicon on this script? http://www.lekitra.tk/js/rc.js

MS-potilas said... [reply]

@lekitra
Hi,

in my script I first get the authoruri in lines 153-154. Then in lines 158-166 I either use the author[0].gd$image if it exists or use the site icon, using url http://www.google.com/s2/favicons?domain=authoruri.hostname. I use only author[0] because in Blogger there can be only one author in a comment. At least I think so.

Anuradha Warrier said... [reply]

Hi, I'm grateful for your hack which allowed me to add the 'Recent Comments' tab to my sidebar. Unfortunately, clicking on the comment ('continue') only takes me to the post, not the comment itself. Is there any way that if I click on the comment preview in the sidebar, it will take me to the comment on the related post?

Thanks

MS-potilas said... [reply]

@Anuradha Warrier
Hi,

I checked your blog, and I found out you are using Disqus commenting system. My gadget does have the link to the specific comment, but unfortunately Disqus has different #hash for each comment than Blogger, from where the comments are fetched.

There are two quite good solutions:

1. Use my gadget with a modification:

You can change the comment links point to #comments hash, then the links take you near the end of the post where the comments start. You need to edit two places in the gadget's script:

find:

href="' + href + '"

replace with:

href="' + hrefPost + '#comments"

Same text is there twice, replace both of them. Save the gadget, and try how it works.


2. Use gadget from Disqus:

Disqus has also a recent comment gadget. Use this code in a html/javascript gadget:

<style type="text/css">
img.dsq-widget-avatar {
width:16px !important;
height:16px !important;
padding: 0 !important;
margin: 0 3px 3px 0 !important;
border: solid 1px #000;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
</style>
<div id="recentcomments" class="dsq-widget"><script type="text/javascript" src="http://awarrier.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=16&excerpt_length=90"></script></div>

Timestamp (for example "16 hours ago") works as a link to the specific comment.

Anuradha Warrier said... [reply]

@MS-potilas

Thankyou, thank you , thank you!! The second one worked like a charm. It's sweet of you to have gone to the trouble of going to my blog and checking. :) I'm very very grateful.

Vinay said... [reply]

How can we show the Facebook recent comments with Blogger?

MS-potilas said... [reply]

@Vinay Prajapati
I'm sorry but I'm not familiar with Facebook commenting system. There are articles how you can use Facebook commenting on blog, but I don't know how to get the recent comments in that case.

Twinkler said... [reply]

Hello, and thank you very much for this great code! Can you please tell me how I can insert the date and time of every comment?

MS-potilas said... [reply]

@Twinkler
Hi,
you can use [date], [time], [datetime], and [date format] in the different texts (lines 20-23), for example change:

var txtWrote = 'wrote:';

to:

var txtWrote = '[user] wrote [date MM/dd/yyyy hh:mm]:';

Twinkler said... [reply]
This comment has been removed by the author.
Twinkler said... [reply]

@Twinkler

Thank you so much, Sir.

Is there a way so that the line
var txtWrote = '[user] wrote [date MM/dd/yyyy hh:mm]:';

not lead to the post link? Or even better lead to the comment its self.

Twinkler said... [reply]

@Twinkler

One more question: can I change the color of the above line?

Thank you in advance.

MS-potilas said... [reply]

@Twinkler
You have to further change the code to remove the link.

Replace this code (line 194)

document.write('<div title="'+tooltip+'" class="recent-comment-header'+clsAdmin+'"><div title="'+tooltip+'" class="recent-comment-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');

with

document.write('<div title="'+tooltip+'" class="recent-comment-header'+clsAdmin+'"><div title="'+tooltip+'" class="recent-comment-ico'+clsAdmin+'">'+imgcode+'</div>' + txtHeader + '</div>');

After removing the link, to change the color of the header text, modify this line (line 5):

.recent-comment-header {}

to for example something like this:

.recent-comment-header { color: #ff0000; }

(red text)

Twinkler said... [reply]

@MS-potilas

Thank you for the quick reply, Sir.

I decided to keep the link, and remove the word more.

Then tried to change the color but no change... Can you please tell me what to do?

Twinkler said... [reply]

@Twinkler

P.S. The code change you applied to me works great!

If you have time, please tell me also how the color change can be done, without remove the link.

Basically, I want only one link to the comment: the header line or the word more. That is why I am asking for all these.

THANK YOU ONCE MORE!

MS-potilas said... [reply]

@Twinkler
Link can be styled like this, change the line

.recent-comment-header { color: #ff0000; }

to

.recent-comment-header a:link { color: #ff0000; }

you may also want to add these lines after the a:link line:

.recent-comment-header a:visited { color: #800000; }
.recent-comment-header a:hover { color: #00ff00; }
.recent-comment-header a:focus { color: #008000; }
.recent-comment-header a:active { color: #0000ff; }

Colors I chose are just nonsense. Here is a guide for styling links in CSS: http://www.smashingmagazine.com/2010/02/13/the-definitive-guide-to-styling-web-links/.

Twinkler said... [reply]

@MS-potilas

Unfortunately the color of the line didn't change after using the last code...

MS-potilas said... [reply]

@Twinkler
I have now applied these lines in this blog in the recent comments:

.recent-comment-header a:link { color: #0000ff; }
.recent-comment-header a:visited { color: #0000ff; }
.recent-comment-header a:hover { color: #0000ff; }
.recent-comment-header a:focus { color: #0000ff; }
.recent-comment-header a:active { color: #0000ff; }

and it makes the title links all blue, which was expected. So I think the code should work, just double check you've done it right. You can also look the source code of my blog page to see the lines listed above there. And you can compare it to the source of your blog page. Hope you get it working :)

Twinkler said... [reply]

@MS-potilas

Hello, again. :)

I have deleted the code and started from the begining:

1. Copied your code from above.
2. Replaced the line .recent-comment-header {} with the code given in your last comment.

But the result is the same. The fonts remain white. Here is my blog so you can see that no blue... Of course you can make your comments and give some advice in order to become better.
http://mandolino111-twinkler.blogspot.com/

3. Thank you for your efforts so far!

MS-potilas said... [reply]

@Twinkler
Thank you for the link, now I've got the solution. There is some other CSS code in your blog's template that overrides our CSS settings. So we have to override those with !IMPORTANT, using code like this:

.recent-comment-header a:link { color: #0000ff !IMPORTANT; }
.recent-comment-header a:visited { color: #0000ff !IMPORTANT; }
.recent-comment-header a:hover { color: #0000ff !IMPORTANT; }
.recent-comment-header a:focus { color: #0000ff !IMPORTANT; }
.recent-comment-header a:active { color: #0000ff !IMPORTANT; }

Twinkler said... [reply]

Good morning! It's me again!

I would like to ask if you have a code for a Read more button.

Thank you!

MS-potilas said... [reply]

@Twinkler
Good morning :) I'm afraid I don't have that, but there seems to be plenty of them from other sources.

Twinkler said... [reply]

@MS-potilas

Hello! Yes, also there were plenty of Recent Comments gadgets in the web, but yours is the best! :)

Twinkler said... [reply]

Hello, MS-potilas. Suddenly, the gadget of comments does not work properly. I have it set so the 2 recent comments from every post to be shown. But the gadgets shows 3. And everything change when I change the number of posts and when I write a test-comment to check.

MS-potilas said... [reply]

@Twinkler
Hi,
by default the script loads 25 posts and comments from the feeds, and tries to satisfy the numPerPost setting using those comments. But if there are, for example, comments to only two topics in those 25 comments, and gadget should show 5 comments, then numPerPost is incremented automatically so that 5 comments can be shown.

To prevent this, you can set the script load more comments and posts, by setting these two variables for example like this:

var maxResultsPosts = "&max-results=100"
var maxResultsComments = "&max-results=300"

This should fix your problem. Also lower values may work (you can try 50/100), the lower they are the faster the script executes, at least in principle. In practice one may not notice the difference.

Twinkler said... [reply]

@MS-potilas

Hi, Sir. I did't understand how the script works and why that problem suddenly appeared, but I did what you said, and everything is ok now. Thank you once more!

David Funes said... [reply]
This comment has been removed by the author.
David Funes said... [reply]

Hi MS-potilas, can you give me a hand, please?
I'm trying to change urlAnoAvatar image but it doesn't work, I really don't know what I'm doing wrong, the change I'm making is the following:
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlAnoAvatar = 'http://img1.blogblog.com/img/anon36.png' + sizeAvatar;
Thank you very much

MS-potilas said... [reply]

@David Funes
Hi,

try this line instead:

var urlAnoAvatar = 'http://img1.blogblog.com/img/anon36.png';

David Funes said... [reply]

@MS-potilas
You replied to me at the speed of light ;), thank you very much indeed, it worked perfectly!

David Funes said... [reply]

Hi MS-potilas, I'd like to ask you another question if you don't mind please.
I've put a frame around the avatar adding the following code in .recent-comment-ico CSS:

border:4px solid #fff;
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:0 0 4px rgba(0, 0, 0, 0.8);
-moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.8);
-webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.8);

The problem is that the avatar isn't centered and there's a small padding at the bottom, between the image and the frame, I've tried to solve this adding in the CSS: padding:0px; and also padding-bottom:0px; but it didn't work. I've also increased var sizeAvatar, but this isn't the origin of the problem, since I've tested with several sizes and this padding is always shown. Could you help me out? Cheers!

MS-potilas said... [reply]

@David Funes
Hi,

try setting the height of .recent-comment-ico div in CSS, for example by adding:

height: 24px;

to the code you gave me, value depending on the icon size. Hope it works, I'm not good at CSS :)

David Funes said... [reply]

@MS-potilas
It works when the height value you told me is the same as var sizeAvatar, best regards.

Twinkler said... [reply]

Good evening, Sir.

I have a problem with the Recent Comments gadget.

I made my blog private for some members only. To do this by the way I want, I had to change the url. But since then, the Recent Comments gadget disappeared... Any ideas???

Twinkler said... [reply]

Another question: I exported my blog and imported it to another (I want to have two same blogs), but the read more feature does not work with imported posts. Actually, instead of in html of every post, there is something else. Is there a way to change the code for every post in the new blog?

Thank you in advance!

Twinkler said... [reply]

I hope MS-Potilas is OK...

MS-potilas said... [reply]

@Twinkler
Hi, sorry for the late answer, I'm fine, I was just on a holiday away from my computer :)

In a private blog also its feeds are private. So that's why the gadget cannot get the info. I'm not sure if there's any workaround. You might be able to make a public Feedburner feed from private comments feed, like in this article http://blog.benfinnigan.com/2011/03/how-to-set-up-public-rss-feed-for.html and then use that feed in the gadget. But I'm not sure if it can be made work.

I don't know why the "read more" does not get imported. Maybe alter the exported file (using text editor or tools) before importing it? I'll post more if I come up with something.

Twinkler said... [reply]

@MS-potilas

I'm glad you are fine! :) Well, I have tried a lot of things these days, and I'm not sure if I should. All started after I discovered that suddenly, my blog had an extremely high number of visits, from Russia and Ukraine. I read that when something like this happens, then bots made their appearance. Also, I noticed that some links leaded to my blog were not good. So I decided to make the blog private. But it seems that it's not so simple, as I have to change many many things, delete useful widgets, loose css codes, change internal links addresses ... So now, I don't know what to do... Leave the blog private and tried to change everything or make it public again and do something about bots and bad sites? What is your opinion? I had a really nice blog (I think) and now I feel that I destroy it...

Thank you!

P.S. I don't need anymore the other blog with the read more problem, so it's not necessary to search about it.

MS-potilas said... [reply]

@Twinkler
Hi,

do you have reCaptcha enabled in your commenting? It is the setting called "Show word verification". I have it and get only about 1-2 spam comments per week, which is manageable.

Traffic coming to blog from strange urls might just be so called "referrer spam". Best you can do about it is to ignore it, it is not really traffic coming from those urls, but from bots which advertise those urls. Here's a good answer in the product forums: https://productforums.google.com/forum/#!topic/blogger/2q-Zpr4zr8s.

Twinkler said... [reply]

@MS-potilas

I felt much of relief reading your answer and the post above. So the best is to return to the public view again... I will try, but it seems that I will need some help, as I've made a lot of mess in there!

Twinkler said... [reply]

I think that I need two more things to get everything back to normal, but I don't know how:

1. When a tab on the navigation bar on the top is active, there is no color showing that I am there. Only the first two tabs (which are blogger pages) have this feature. How can I make it for all the tabs?

2. I would like every link (e.g. from navbar tabs or the blog archieve) open in a different tab, like the comments in your gadget. I had this feature before, and I would like it back. But how?

And something else I would like to ask: is it possible to have a color on the unread comments?

That's all, and thank you again very much!

MS-potilas said... [reply]

@Twinkler
Hi,

the tabs not coloring is probably because you still have &zx=b51365d8d49ae94b in your links, which was needed by private blog. Try removing those.

I don't know how to make all page gadget links open in new tabs. Few suggestions:
1. Try adding all pages using "external link" (uncheck from the page list)
2. Try using "link list" instead of "page gadget". I don't know the details, I just googled that it can be done. :)

For recent comment colors, you could at least change the color of the links, depending if you have visited it (the comment) or not, using these CSS:

.recent-comment-header a:link { color: #0000ff; }
.recent-comment-header a:visited { color: #ff0000; }

also you can add (if you want the bottom link colored, too):

.recent-comment a:visited { color: #ff0000; }

Twinkler said... [reply]

@MS-potilas

I can't make the active tab stay colored... I tried many things from google, but nothing helps, as many other things I try. My blog is http://mandolino111-twinkler.blogspot.com, and when you have time you can take a look, to see what I mean about tabs on the Pagelist widget. Only the two first static pages stay colored when they are active.

MS-potilas said... [reply]

@Twinkler
The page gadget links should point to .com adresses to make the coloring work. Now for example the third link is http://mandolino111-twinkler.blogspot.com.cy/search/label/ΑΝΑΚΟΙΝΩΣΕΙΣ?max-results=5 and should be http://mandolino111-twinkler.blogspot.com/search/label/ΑΝΑΚΟΙΝΩΣΕΙΣ?max-results=5

Twinkler said... [reply]

I changed all the links. Active tabs, again, don't stay colored... :( But, with this action, every tab opens in a new tab, as before.

MS-potilas said... [reply]

@Twinkler
That's weird. Before posting my previous answer, I tested on this blog that it works if you have .com urls (I made a tab http://yabtb.blogspot.com/search/label/hack). The active tab has a class "selected".

If you look at your blog's template html, and gadget PageList1, you should see this condition "b:if cond='data:link.isCurrentPage'". Blogger should set this isCurrentPage to true when you're on the tab's page. Maybe you could try replacing mandolino111-twinkler.blogspot.com with mandolino111-twinkler.blogspot.cy (regional top level domain)? Other than that, I'm out of suggestions. If that happened to me, I probably would ask help from the product forums.

Twinkler said... [reply]

@MS-potilas

I don't know anything about coding. I google, find and try. I think that two years ago I created a link list in html code, and added some css. But I don't remember. I also tried your hack with the coloring of the author's comment, but it does not work in my blog. It seems that something changed, but I don't know what. I will keep trying... Thank you for your help. Meanwhile, if you think something will be appreciated. :)

Twinkler said... [reply]

@MS-potilas

Hi, Sir. I asked for help in Google Forums, and finally found a solution. Just to let you know what I did: https://productforums.google.com/forum/#!topic/blogger/9swHvGPAchg;context-place=forum/blogger

Thank you again for all your help.

I will come back soon. :D

MS-potilas said... [reply]

@Twinkler
Hi, I refined the code a bit and posted it to that thread. The code should now take care of regional TLDs (no need to force .com), ?m=1, and other parameters (for example when clicking for more posts). Hope it works. :)

Twinkler said... [reply]

@MS-potilas

OF COURSE, IT WORKS, AND I POSTED IT IN GOOGLE FORUMS!

YOU ARE A GENIUS! I spent days to find a solution, and the solution it came from you once more! THANK YOU!!!

As you might already have seen, I added your number of comments in every post hack, as well as the round avatars in Recent Comments. Now I'm trying to add color at author's comments in Recent Comments, but I can't. If I need help, I know where to ask!!! ;)

Twinkler said... [reply]

And here is the next questions! (please, forgive me for my questions... )

Although I have enabled the option for everyone to make comments, blogger doesn't allow it. I try it my self, and only the comments by a Google profile are being accepted. Why?

In addition: I have https off. When someone writes a comment (ok, with Google profile), the blog is redirected to https. As a result, the Recent Comments gadget and the Sudoku gadget, disappear. What can I do for this?

MS-potilas said... [reply]

Hi @Twinkler,

if you have Google+ comments turned on, try turning them off (settings -> post, comments and sharing).

To make this recent comment hack, and others, too, work in https, you should change all references to "http://" to "//" (i.e. delete "http"), then they work on both http and https. In this script make changes to lines 35, 37, 157, 164, 169, 212, and 213. For example line 213 will become:

document.write('<script type="text/javascript" src="//'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');

Probably in Sudoku you have also one ore more http://'s which should be changed to //'s.

Twinkler said... [reply]

@MS-potilas

Hi, MS-P.

Thank you for answering once more to me.

No, I haven't Google+ comments enabled, and I have no Google+ account. It's strange, because only with a Google account one can leave a comment. Perhaps Google changed its terms in using this feature in Blogger. I don't know. I think I will disable comments from everyone, in order to avoid complaints about this. But again this redirection to https, is strange (it's happening in YABT too...).

I tried to change all http:// in Recent Comments gadget to //, but I saw every avatar turning into the orange Blogger avatar! So I started from the end of the hack, and after replacing the two last http://, the gadget worked in https too. So I didn't change the other links.

The Sudoku just not works in https, and I can't change something inside the code. Never mind for now.

And something else, but important: the code about tabs, which solved the problem with the active tab's color, does not work in Microsoft Edge. What difference has this browser compared to the others?


Twinkler said... [reply]

It seems that the hack is not working now. Is there anything we can do to make it work again?

Twinkler said... [reply]

Please, Sir! Fix the hack!!! :(

Twinkler said... [reply]

Recent comments gadget with avatars does not work anymore. Is there a way to fix it???

MS-potilas said... [reply]

@Twinkler
Hi,

sorry for my late reply, after been tied up in one programming project for several months, I had a little summer vacation and away time from computer :)

To fix the icons, please change the updated lines 157 and 158 (source code in the article is updated).

Twinkler said... [reply]

@MS-potilas

Thank you very very much! Is there a way to add a border round the avatars? I have the round avatar hack in my blog.

Twinkler said... [reply]

Hey, Mr MS-Potilas.

I changed my blog recently, but there is a problem with the recent comments gadget. No images are shown. You can see it here: https://twinkler2.blogspot.com/
Is there anything we can do?

Twinkler said... [reply]

I changed the url again. Now is https://twinkler1.blogspot.com/. The avatars does not appear for the old comments. But they appear for new ones. What can I do for this?

devasuresh121@gmail.com said... [reply]

Thank for this blog are more informative step by step and useful contents. I here by attached my site would you see this blog

7 tips to start a career in digital marketing

“Digital marketing is the marketing of product or service using digital technologies, mainly on the Internet, but also including mobile phones, display advertising, and any other digital medium”. This is the definition that you would get when you search for the term “Digital marketing” in google. Let’s give out a simpler explanation by saying, “the form of marketing, using the internet and technologies like phones, computer etc”.

we have offered to the advanced syllabus course digital marketing for available join now

more details click the link now

https://www.webdschool.com/digital-marketing-course-in-chennai.html

Blake said... [reply]

I`m lucky to read this content which includes everything at the point. I have also subscribed this. In return for this beautiful content I would like to suggest you Black Wood for Men which is a great brand for Men which provides awesome men skin and body care products. Black Wood for Men is an online men skin and body products store in the USA. I have tried Black Wood for Men products and got some awesome results for my skin.

Stevennall said... [reply]

Thank you for taking the time to write such an informative post. Your blog is not only informative, but it is also very creative.
website design and development

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: