Use new blank Blogger profile picture in comments

Blogger profile pages used to be like this (sample from Blogger documentation):

Profile pages changed to something like this a month or two ago:

If user hasn't set a profile image, then the "avatar blue" image is shown instead, like in the picture above. But in blogs' comments section, these users' avatars display the icon, not "avatar blue". With this little hack you can change these users' avatar icons in your blog's comments.

Blogger icon → avatar blue
First I suggest you install avatar for anonymous commenters, so you will have the avatar size right, and also mystery man for unregistered commenters.

Open your blog template html, edit widget templates. Find the widget block that begins with the following line:

<b:includable id='comments' var='post'>

Then find this line that ends the comments includable block:

</b:includable>

If you want the jQuery solution, insert this before </b:includable>:

<script type='text/javascript'>
//<![CDATA[
$("#comments-block img[src$='http://img2.blogblog.com/img/b16-rounded.gif'][width$='16']").attr("src", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMe3GlIVjxa4xDBtmfx3PDwZt5_lktr4-mckVsym6CloCvnnSIdJohcJTpsv7TwxNSsSV9Jf75GztpuKyjQRjcPRfm_cii6AjDEnM3xGHbLmjW-cDE1gKg0FKi12y2cIreqS960ujki70/s37/avatar_blue_m_96.png");
//]]>
</script>

(Double click to select for copying.) If you use jQuery, you need to have jQuery loaded somewhere in your blog's template page. Or if you want the non-jQuery solution, insert this before </b:includable>:

<script type='text/javascript'>
//<![CDATA[
if(document.getElementById("comments-block")) document.getElementById("comments-block").innerHTML = document.getElementById("comments-block").innerHTML.replace(/http:\/\/img2\.blogblog\.com\/img\/b16-rounded\.gif/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMe3GlIVjxa4xDBtmfx3PDwZt5_lktr4-mckVsym6CloCvnnSIdJohcJTpsv7TwxNSsSV9Jf75GztpuKyjQRjcPRfm_cii6AjDEnM3xGHbLmjW-cDE1gKg0FKi12y2cIreqS960ujki70/s37/avatar_blue_m_96.png");
//]]>
</script>

(Double click to select for copying.) Choose either, don't use both. "Avatar blue" image is uploaded to my Picasa web album, so different sizes can be fetched easily. This hack goes nicely with my recent comments hack, which is also able to substitute the icon with the "avatar blue".

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:

• loads Blogger avatars (profile images) using the new avatar urls in comments feed
• avatar icon size can be more easily configured
• three CSS examples for different size avatars.

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).

Christmassy Concentration Memory Game

If your blog's readers celebrate christmas, why don't you publish them a nice memory game to play on holidays? I tidied one javascript game a bit, made it work on Blogger and also on dynamic views, worked even in a Feedburner feed. With christmassy pictures it looks like this:

Free JavaScripts provided by The JavaScript Source

If you do it under 1:30, that's quite good.

Here is the source for the game. This can be put in a blog post (use html editing mode), a blog page, or some other html page. Probably works in a html/javascript gadget, too. If you wish, upload another set of pictures, and change the image path in the source to use those pictures. Have fun.

Data provided by Pastebin.com - Download Raw

Comment feed has now Blogger avatars

I added avatars to my recent comment gadget using a helper application coded in Python. Blogger has updated its feed format now in December 2011, and comment feeds now include also author avatars (author images) for Blogger users. The update is of course because of the dynamic views – I think everything dynamic views can display comes from feeds (unlike in the "traditional" blogger views).

This is great, and at the same time, will render my avatar fetching application pretty much obsolete. Although it will still work.

I found out about this feed update reading Aratina Cage's Last Comments blog. There's some impressive work, I recommend to check it out: very versatile recent comments gadget, and the new InComm, which looks great.

I will later modify my recent comments gadget to use these new author images from feed, instead of the Python app, and will then post the new version. Stay tuned.

Shuffle and limit popular post gadget post count

First look at these two previous articles about customizing popular posts gadget:

Shuffle Blogger popular posts and
Excluding specific popular posts in Blogger.

If you exclude posts from popular posts gadget, then you don't have exact count of popular posts – the count depends on how many excluded posts were in the list.

With this hack you can shuffle and then limit the count of popular posts. If you already have installed the shuffle hack, replace it with this code. You can put this code in a HTML/Javascript gadget, or in html template before </body>.

Data provided by Pastebin.com - Download Raw

This hack is installed on this blog, I use 10 popular posts, from which I exclude the current post user is viewing, and some others. Then the list is shuffled and limited to 8 entries. Modify the popcount variable in the script to get a different amount of posts. In my MS-potilas blog I use five popular posts, picked from ten posts minus some possible excluded posts.

Lazy load YouTube videos

Update Feb 26th 2012: new version here.

YouTube videos are easy to embed, and they may enrichen your blog. You may want to give user a wide selection of videos from which to pick the interesting ones.

But the more you have videos on your page, the slower it loads. Every video is hosted in an iframe, in which a flash from youtube is loaded, and flash loads the default picture for the video. For one video, it does not take too long, but for 20... Also, this consumes browser and flash plugin memory quite a lot.

I found this article about Lazy Loading Video To Speed Up Your Web Page. Using these ideas as a start and wanting to simplify the process (taking screenshots - too laborious), I developed my own "lazy loader" for single YouTube videos, to be used in my MS-potilas-blog. And the pages load now much faster, especially the labels which contain videos. This solution is not limited to Blogspot blogs, but can be used anywhere. Here is a jsfiddle based on this code for testing.

Nowadays the new YouTube embed code looks like this:

<iframe width="420" height="315" src="http://www.youtube.com/embed/eS67OxC_UN0?rel=0" frameborder="0" allowfullscreen></iframe>

Resulting this (normal YouTube embed):



Using lazy loading

So let's speed up our page load time. Once the lazy loading script is installed, to use lazy loading, use this kind of code for a video instead of the iframe code:

<a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=3u8sEaohHMk">Jean Sibelius: 3rd Symphony, 1. Allegro Moderato</a>

Result (lazy loading):

Jean Sibelius: 3rd Symphony, 1. Allegro Moderato

or if you wish other size than default 560 x 315, do like this:

<div style="text-align:center;"><a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=SFiWfrLEqPw" style="width: 420px;height:315px;" title="Click to play!"><b>Mozart Fantasy in C minor</b> played by me</a></div>

Resulting this (lazy loading):

Mozart Fantasy in C minor played by me

If you are lazy, too, and converting a lot of old youtube iframes to lazy loading links, you can also use the "youtube embed url" directly in the href, you don't have to convert it to "youtube watch url".

Default width is 560 pixels and default height is 315 pixels. You don't have to use style parameter, if you use the default size. Width and height can be copied from the embed iframe code to style parameter.

Use a descriptive text inside the link (artist, song name plus maybe (m:ss) length of the video), whatever you like. You can use a text in your own language to describe the video. If you use line break in the link text, start consecutive lines with &nbsp; to get consistent indenting.

If lazy loading code does not run for some reason (javascript disabled) or there is some error (script not installed?), then links to the youtube videos are shown as a fallback. Also in dynamic views only the link is shown. When script is run, link background is set to default image of the video, and a play button div is dynamically created over the link element. Script uses two external semi-transparent images, play button and an active (hover) play button.

When user clicks the link with the video image, the link is replaced by the iframe code, flash is loaded, and then video starts to play.

Here's another demo page (besides this post) with many videos: 11. joulukuuta.

Installing the lazy loader

Edit page/template html. Check, if you have jquery loaded (try searching for "jquery"). Find </body>, and paste this code just before it (leave out line 1, if you already had jquery loaded):

Update Feb 26th 2012: new version of the script here, you should consider using it.

Data provided by Pastebin.com - Download Raw

Embed parameters

If you want to have parameters in the embed code, just put them into href, like this:

Bach Contrapunctus I from the Art of Fugue, played by me<br />
<a class="youtube-lazy-link" style="width:560px;height:410px;" href="http://www.youtube.com/watch?v=bETMzZhunDI&rel=0&color=white&theme=light&showinfo=0">Bach Contrapunctus I from the Art of Fugue, played by me</a>

Resulting (lazy loading):
Bach Contrapunctus I from the Art of Fugue, played by me
Bach Contrapunctus I from the Art of Fugue, played by me

If you use showinfo=0, the script hides the link text. It is still good to use the link text, in case the script does not run for some reason, and for dynamic views, maybe for feeds, too.

Reference: YouTube embedded player parameters.

Feedback?

I'm very satisfied how the script works and how it speeded up my main blog, but could it be made simpler or somehow better? If you know jQuery, CSS, DOM, and have ideas for this lazy loading script, please leave a comment. Or if you have artistic skills, the transparent play png images don't look exactly the same as in YouTube... although images I use are quite good, they have smoother edges than YouTube's, even better than in YouTube? Share your thoughts.

I tested this with Internet Explorer, Firefox, Chrome, and Opera. Should work on other jQuery compatible browsers, too. CSS parameter background-size is not supported by all browsers, but the result looks also good on those browsers that don't.

Excluding specific popular posts in Blogger

Popular posts gadget is great. But sometimes it might display entries, that you don't want to advertise (anymore). For example, some post made for testing may be popular, but there is no need to show that to users. Or you might have an old and a new version of some article in the popular posts, and you don't wish to display the old one.

When editing your blog template, you should know you way around to not to break your blog.

To exclude posts, first write down the urls of the posts you want to exclude from popular posts. Then edit template html, expand widget templates, and find:

<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>

Just after those lines add one line per post to be excluded, a line like this:

<b:if cond='data:post.href != &quot;http://yabtb.blogspot.com/2011/09/dummy-post-8th-post.html&quot;'>

Then find (in the same popular posts code block):

      </li>
      </b:loop>

Between those two lines, put one:

</b:if>

for each excluded posts, so if you exclude 3 posts, put 3 </b:if>s, like this:

      </li>
</b:if>
</b:if>
</b:if>
      </b:loop>

I have omitted the indentation of the added lines in purpose, so they "stand out" better and can easily be spotted and edited.

Excluding the post that user is currently viewing

Find:

<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>

After that add:

<b:if cond='data:post.href != data:blog.url'>

And add one </b:if> after the </li> line, like in the previous chapter.

You may want to shuffle the popular posts, too. Or maybe shuffle and limit the post count to certain number (like a random set of five posts from the ten most popular minus currently viewed post) – maybe more about that later.

Shuffle Blogger Popular Posts

Blogger's popular posts gadget is a great way to introduce more interesting topics in your blog to an occasional reader. The gadget uses blog statistics, and the most popular post (from the chosen period or all time) is displayed first, second popular is second, etc.

The gadget is really great, but I missed some features. If you have always the same list in the same order in your sidebar, users very quickly ignore it. But if you shuffle the entries, the list looks fresh every page load. And I could not tell, which one of my most popular posts is the best, they are all good ;) and so random order suits them better.

So my first hack (more coming along) for the Popular Posts gadget randomizes the order of the popular posts. You can install this by adding extra HTML/Javascript gadget in your sidebar or paste the code to an existing gadget (the gadget must be after the popular posts gadget!), or you can put this code in your template html, just before </body>.

Data provided by Pastebin.com - Download Raw

I use a simple but effective Fisher-Yates/Knuth shuffle to shuffle the posts. You must have jQuery loaded in your page for the code to work. If the script did nothing to your popular posts list, try adding the following code, which loads jQuery, in your template before </head>:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

I'm very pleased with the result of the hack, and hope you like it, too. You can see a working example of this in my MS-potilas blog ("Popular Posts" is "Suositut artikkelit" in Finnish), and later I'll install this also on YABTB (now installed).

Gadget tabifying widget for Blogger

Sidebar gadgets may be an important part of your blog. There are literally hundreds of different gadgets you could have in your blog. But the size is kind of limited, if you have too many, users might not scroll pages after pages to see what gadgets there are. I have had one hack in mind, that would collapse/expand single gadgets, when user clicks on the gadget title, to save space so user finds the gadgets easier. I started playing around with this idea, hiding and showing the gadget divs... And then I realized...

If I have say four subsequent gadgets, and I hide three of them and show only one at a time, it is like showing one page of four gadget pages. And a good UI component for selecting one of several pages is "tabs". So my idea of one hack turned into another: tabbed sidebar gadgets (I still might do the collapsing gadgets some day, too).

Some coding, and my javascript widget that tabifies other gadgets (gadget tabifying widget) was ready for testing. Look at this picture:

See how much vertical space is saved! A couple of these tabifying gadgets, and your new sidebar could be just a fraction of the old sidebar. You can see a working demo in my other blog, MS-potilas (blog is in Finnish). Later when I have time I will install these tabbed gadgets on this blog, too.
(Dec 4th 2011: installed on YABTB.)

The tabifier script

You have say 2–5 gadgets that you want to tabify (turn into "tabs"). Place a HTML/Javascript gadget just above them, and in the gadget put my code. You may give the gadget a title for housekeeping, by default the script hides it when run.

Script does not need jQuery library, which is often used in making user interface tabs. I wanted a clean and light, low level approach, and learn more, so I coded it just using CSS/html and javascript without any libraries.

Data provided by Pastebin.com - Download Raw

Script configuration

There are some configurable variables in the beginning of the script. But first, if you use more than one set of tabs in your blog, for the second gadget, you must do a search and replace, and replace all instances of "tabnav0" by "tabnav1" (and "tabnav2" in third tab set, etc) in the script.

Configure the number of gadgets you want to tabify. By default the tab titles are taken from gadget titles, which are then hidden by the script. Short titles are preferred, so the tabs don't span on several lines, which does not look good, works though. If you want, you can specify the tab titles in the array tabnav#_tabtitles, so you don't have to shorten the titles of the actual gadgets.

You can also style the tabs using CSS. Every tabset has different IDs and so can have different styles. I've added some simple grey gradients to the tabs, which I made using my gradient png data URI maker, but the tabs look ok without gradients, too.

Nested tabs

My tabbed gadgets can be nested. But if nested, the gadget that contains another tab set must always be the last tab of the "upper" tabbed gadged. And also increase the two z-index values by one in CSS of the inner tabifier script(s), so they are rendered better. I suggest you to not use nested tabs, because the user interface might get confusing to the blog reader.

Another tabify gadgets implementation, using jQuery

I googled for other tabbed gadgets' implementations, and found one at Blogger Sentral: The easiest tabbed content widget for Blogger, demo here, which looks very good. It uses jQuery to draw the tabs and is quite different from mine. You might want to check out that one, too, and decide whether use that script or mine. There is also much other interesting stuff @ Blogger Sentral.

New info January 30th 2012: Gadgets with iframe and Internet Explorer 9

This hack hides "hidden tabs" (gadgets) using CSS display:none. In Internet Explorer 9 for some reason, if gadget has an iframe, it won't be shown. You can specify your blog to use Internet Explorer 8 document mode, if you have iframe-containing gadgets you want to tabify. I.e. in the <head> section, there should be line:

<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

Or don't tabify iframe containing gadgets. If you do, make sure you test it with Internet Explorer. This might be related to this feature, but my script is not altering the DOM, only visibility, so I'm not sure. If you have some clue why it does not show in IE9 document mode, please let me know.

---

A small visual update, May 6th 2013:: Fade in effect for tabs, see the hack.

---