UPDATED: this handy feature have been included in the v5.0, which repackaged in 3/7/2012  and you can switch archives view with different modes, supporting "List" in default, "List withour year" and "Dropdown". Please feel free to get v5.0 for upgrade in the download page.

Monthly-Archives-List

Today our clients raised a help request in our forum as follow:

is it possible to hide the clickable Archive Year in the Archives widget? We'd ideally just want the months listed without the parent LI displaying the year.

The request looks reasonable and indeed the monthly archives list like that style is more common in the blog platform. Now we would like to show you how to adjust it with some simple code below:

(function () { jQuery('li.year:first').closest('ul').html(jQuery('li.year ul li')); })(jQuery);

What you need to do is that just place it in your dnn blog page, such as skin view file or any script widget.

Advanced Extension

Everything looks great now but the biggest problem with this monthly archives is that the size of the list grows every single month, taking up more and more room. The drawback is  so obvious that you may have to restore the original way of SunBlogNuke  (yes, limit years with expanded monthly archives & other clickable years with hidden monthly). Event more we would like to show you that there is another alternative way of getting around this; use a drop-down list. The drop-down takes up very little space until clicked on, and is a suitable method of browsing through the months because they are all in order, making a particular date easy to find. Just perfect replacement. :)

The code to build awesome drop-down monthly archives list is so simple like that:

(function () {
    var $dropdownlist = jQuery('<select id="monthlylist"><option value="">Select Month</option></select>').change(function () {
        if (jQuery(this).val() != '') window.location = jQuery(this).val(); 
    }); ;
    jQuery('.widget-archives li.year a').each(function (i) {
        $dropdownlist.append(new Option(jQuery(this).text(), jQuery(this).attr('href')));
    });
    jQuery('.widget-archives').closest('div').append($dropdownlist);
    jQuery('.widget-archives').remove();
})(jQuery);

Also what you need to do is that just place it in your dnn blog page, such as skin view file or any script widget. And there you have it, a much more compact method of showing the archives.

Conclusion

If you’re currently showing a long list of months on your dnn blog, then try the alternative way that we listed here. You’ll notice the different immediately. It will keep your blog clutter-free and beneficial to the user with usability.

Blog your way and enjoy life. :)

Resources links:

15 Creative Ways to Display Date Archives

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!