Today I would like to share some tricks about integrating jQuery timeago plugin into DotNetNuke(DNN) and your blog, especially for the Ultimate blog module SunBlogNuke. With timeago plugin, you can customize the featured widget module with more fuzzy timestamps. Please take a look at the following demo:

Ultimate Blog Featured Widget

What is timeago?

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").

How to apply it for SunBlogNuke?

Let's take the featured Widget module as sample, just following the steps below:

  1. Integrate the timeago script into your website, you can add it in the skin file or just append it into the plugin script file(jquery.plugin.js) of SunBlogNuke, which will be in the folder($yourwebiste/desktopmodules/sunblog). Please refer to the attached file.
  2. Modify your template for applying the fuzzy timestamps. You go to the Widget Setting and just change the template field similar with the following format:
    <li>
    <
    a href="[TARGET]">[TITLE]<br />
    <
    span class="listMeta">Posted <abbr title="[ADDEDDATE]" class="timeago">[ADDEDDATE]</abbr>
    with [COMMENTCOUNT] Comments » </span>
    </
    a>
    </
    li>
  3. Now, let's attach it to your timestamps on DOM ready:
    jQuery(document).ready(function() {
      jQuery('abbr.timeago').timeago();
    });

    Or you can just append "jQuery('abbr.timeago').timeago();" to the utility script(utility.js) of SunBlogNuke, which also will be in the folder($yourwebiste/desktopmodules/sunblog), because it have declared the DOM ready.

  4. Update the widget setting.

Congratulations! You should can see your posts with fuzzy timestamps like our demo screenshot.

If you would like to do some more customizations, please visit the homepage of the timeago plugin.