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.

---