SunBlogNuke Team Blog

SunBlogNuke 5.0 Optimization & Better User Experience

Baldwin — Sat, 11 Feb 2012 00:00:00 GMT

Finally the SunBlogNuke 5.0 is available to free upgrade today and it will be first version of next generation blog optimized for DNN5 & DNN6. In this building we completed few critical performance optimizations with cache mechanism and enhanced admin panels with uniform UI for better user experience, for example, we provided a new dashboard, which allows you to see the both published and draft posts, categories, tags, and comments pending approval at a quick glance.

Major Highlights in v5.0:

ENH - Implemented paging control with better user experience.
ENH - Included dashboard panel with lots of awesome widgets, such as Statistics & Quick Press.
ENH - Optimized theme configure.
FIX - Bookmark not compatible with the latest 'sharethis' widget code.
FIX - Update failure on the configure 'Module Extension' panel due to invalid email address field.
FIX - Import bug with blogml - views & permalink not updated correctly.

NOTE: from v5.0 the SunBlogNuke will begin to not support dnn4 any more because it will utilize lots of core APIs introduced from DNN5+, such as Taxonomy. If you are still using the dnn4, you don’t have to be worry about it because we will also maintain independent branch of the older version 4.x, which will always be compatible with dnn4 and may be updated with fixes without new features any more.

You can get it here. We hope that with this generation dnn blog module you can enjoy the blog writing and it will make your life better; plus if you have any good advice about our products, please feel free to leave a comment or contact us.

The SunBlogNuke Team

Integrated DNN with Facebook comments

Baldwin — Wed, 08 Feb 2012 00:00:00 GMT

One of our dnn module products - CommentsPlus is becoming more popular in the dnn environment recently but lots of clients requested more features. And one raised frequently is that it should be built with generic built-in comment system for DotNetNuke website but right now it just integrated with 3rd party comment engines, such as Disqus or Facebook comments. We would like to say sorry for all the clients if it made you confused even this awesome feature included in our roadmap. Meanwhile we will try our best to implement it as built-in comments for dnn as we promised. FYI, in future we will also integrated Google+ comments if it is available :)

Now I just would like to complete the tutorial for Facebook comments integration. Actually the configuration process is similar with Disqus section (Take a look at it if you are not familiar with this process):

1) Enter the configure panel with the left-top action menu of current comments+ module.

2) Switch to Facebook comments with checking the option [Comment type] as "Facebook". Those options are so self-explained and easily configured;plus some notes below":

Application Key: it is "API Key" generated by your own application and requires you create it in the Facebook developer. And please refer to this recourse - How to get Facebook Api key.
Identifier key: It is part of the thread identifier key and will append to the "Identifier prefix" in the Disqus thread. In common letting it blank is all right. Meanwhile, it is more useful to integrate Comments+ with other 3rd party modules, for example, when integrating dnn core blog module you can fill in the query parameter "entryid" as the Identifier key, it will check out the query parameter in the load process. If not exist, the comment system will not show. So just visiting the post detail, the comments+ will work as expected.

3) Click "Update" to save the settings.

Congratulations. Now the Facebook comments system will work like a charm. :)

If you need any help or question please feel free to leave your advice or comments.

Ultra DNN Photos Module – Gallery Plus

Baldwin — Mon, 06 Feb 2012 16:12:12 GMT

If you are finding a highlight solution to display pictures on your DNN website, the Gallery Plus module will be exactly what you need. It is ultra photo gallery framework built on top of DotNetNuke(DNN) platform. The aim is to simplify the process of creating professional image galleries and slideshows for the dnn website.

Overview

Out of the box, you can manage your albums & photos; plus feel free to build your own customized interface by lots of external resources without any complicated code, such as any jQuery gallery & slider plugin you can find. Some initial awesome features as follows:

Multiple & sortable albums.
Ability to upload multiple images and a zip package with images.
Alternatively snazzy HTML5 drag and drop multiple images upload like Google+ (yes, only supported by Firefox & Chrome browsers).
Automatic thumbnail generation.
Dynamic image sizing when uploading images - Images can be scaled automatically and set to a maximum scale to ensure that there’s no loss of quality.
Highly customizable with lots of popular image effect : Fancybox, Lightbox or PrettyPhoto.
Simply drag to sort images with lots of options, such as uploaded date, title, modified date etc.
Support themes with template-driven.
Support tags.
Support cache with high performance.
Support friendly url with album view.
Automatically lazy load to minimize page loading time.

Share photos with your way and enjoy life. :)

Screenshots & demos

Have a look at the screenshots below:

Integrated with Flickr feed:(How it actions)

Delicious-style theme with Fancybox:(How it actions)

DNN Flash Viewer with Full Screen Support:(How it actions)

Html5 Polaroids Theme with Lightbox:(How it actions)

Roadmap

Next we will enhance it with better user experience and cool features as follows:
1) Integrated with cloud storage service providers, such as AWS, Dropbox.
2) Lots of views & widgets to fit your requirements, such as tags view, gallery widget for category.
3) Include the extendibility to be completely customized with lots of different look & feel based your expectations.
4) Social share, such as Social Active module integration.
5) more & more.

If you have any good advice about our products, please feel free to leave a comment or contact us via email. :)

Get it from Snowcovered »

Blogging DNN on iPhone/iPad with SunBlogNuke

Baldwin — Tue, 03 Jan 2012 21:50:46 GMT

Now mobile devices are essential tool for our life & work, such as iPhone & iPad. So it will be excellent if you can blog on the go with those devices, sharing any ideas or photos from anywhere and keeping your loyal blog readers engaged from your interesting things - that means you work pretty much everywhere. Do you like this very comfortable way of living? Let us show you how to blogging dnn blog module - SunBlogNuke on iPhone/iPad with the awesome app – BloggerPlus.

In common, the iOS app 'BloggerPlus' is one of other 3rd party publish tools like Window Live Writer(WLW), required to configure your blog account firstly when building connect with your real dnn blog. BloggerPlus provides following Blog services at now. Our SunBlogNuke service supports standard remote blogging service, so you need refer to "DefaultBlogType" service option. Like the screenshot below:

When click to select option "DefaultBlogType", you will need to fill in the form like that:

Just follow the notes below:

Name: Any name that describes your account
URL: The URL of Your blog page in dnn site
UserID: Your username of dnn site.
Password: Your password of dnn site.
blogID: Here just let "blog" is used and it is optional.
XMLRPC: it should be like that http://yourdomain.com/desktopmodules/sunblog/metaweblog.ashx. Replace 'yourdomain.com' with your real domain name.
RSS: You can find the feed icon in the Meta widget module and click to get the rss link.

Actually there should be lots of blogging apps in App Store, for example iBlogger is alternative one.

Other valuable resources links:

BloggerPlus features tour: http://bloggerplus.xmpp.kr/

BloggerPlus manual: http://bloggerplus.xmpp.kr/node/111

Gallery Plus: A fresh 3D image slider with DNN

Baldwin — Wed, 28 Dec 2011 10:04:31 GMT

Currently we are focusing on our totally new module - GalleryPlus and hope that it will be the last photo gallery & slider module with DotNetNuke platform you would like to owe. With GalleryPlus, you can manage your albums & photos; plus feel free to build your own customized interface by lots of external resources without any complicated code, such as any jQuery gallery & slider plugin you can find. Some initial awesome features as follows:

Multiple & sortable albums.
Ability to upload multiple images and a zip package with images.
Automatic thumbnail generation.
Dynamic image sizing when uploading images - Images can be scaled automatically and set to a maximum scale to ensure that there’s no loss of quality.
Highly customizable with lots of popular image effect : Fancybox, Lightbox or PrettyPhoto.
Simply drag to sort images with lots of options, such as uploaded date, title, modified date etc.
(Optional) automatically image preloaded to minimize loading time.

Today here we would like to showcase one cool sample with core plugins - Slicebox. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object.

Please note that you can only see the cool 3d effect of Slicebox in a browser that supports those CSS3 properties (currently Chrome and Safari). In case the browser does not support 3D transformations, a simple slider will be used as fallback.Take a look at how it action:

SliceBox Demo »

If you are interested in this ultra dnn module - GalleryPlus, please leave your comments with any thoughts below or just stay tune - it will be available soon. :)

UPDATE: GalleryPlus is available for you so please feel free to owe it from Snowcovered.com - Ultra DNN Gallery Module - GalleryPlus.

SunBlogNuke v5.0 on the Road

Baldwin — Fri, 16 Dec 2011 09:23:00 GMT

That is a brief buzz for our development team recently.

Maybe you noticed that we did not release new version currently but just repacked installation with some urgent fixes. Actually we are still focusing more attentions on our core dnn blog product - SunBlogNuke. Yep, we are building totally version 5.0 as we promised ever. In the v5.x, we will enhance more awesome features, specially theme, widget & extension. Meanwhile we also refactored the core framework more highlight, integrity & flexibility. Always we hope that it will be the kind of beautiful, elegant and productive software.

The initial version 5.0 will include some new cool UI for admin panel, such as dashboard & new workaround for theme configure process. Please stay tune and it will be available to download. :). Well. have a quick look at the screenshot about new theme configure panel and you can try it out in our demo blog, which have been upgraded with v5.0:

And we are looking forwards to your feedback. We know that the more feedback we get from our clients, the better our product will be and also we will know which areas require attentions next. So please tell us what you want most or leave your comment below if you are interested in Ultimate DNN Blog Module – SunBlogNuke. Thanks a lot.

Attractive Comment Form for DNN Blog

Baldwin — Thu, 15 Dec 2011 12:08:00 GMT

As you know, the comment is so important to any blog platform that you may have to build an attractive comments form that users will enjoy filling out. Usually forms are pretty classic with standard fields, submit buttons - nothing more, nothing less. But still even little change of field background, border style, layout, rounded corners can make huge difference. Sometimes adding live comment preview, smiles or some simple CSS bold, italic, underline effects to give more options to advanced comment writers, such as Markdown may be a good choice to satisfy these requirements. Today I would like to share you how we redesign our own comment form. If you indeed want to really stand out and create something super in your comment form, please do your own research and considerations, what you like/dislike and why it is so. Ok, let's go ahead.

In common, I am feel ok with the look that standard comment form of SunBlogNuke has, but sometimes it does not feel right in other themes. In favor of simplicity and convenience, we began to create a new clean & attractive comment form for our team blog; plus support Markdown. The 1st version we just adjusted the layout, such as making the label flow right in order to user easily fill out. Take a look at screenshot below:

Actually you just need to modify few styles in your current theme. To apply these changes, just replace the old styles (Begin with '#anonDetails') with the sample code below:

#anonDetails{clear:both;margin:0;line-height:200%;}
    h3#respond {
        color: #9BBDE9;
        font: italic 2.5em "Times New Roman", Times, serif;
        font-variant: small-caps;
        margin: 20px 0 10px;
    }
    h3#respond span {color:#033;font-weight:400}
    #anonDetails label {color: #CCCCCC; float: right; width: 47%; line-height: 30px;}
    #anonDetails input[type="text"] {
        margin-bottom: 0.8em;
        width: 50%;
        padding: 4px 4px 0;
        height: 27px;
        line-height: 27px;
        border: 1px solid #CDCDCD;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
    }
    #anonDetails textarea {
        width: 100%;
        border: 1px solid #CDCDCD;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        margin-top: 5px;
    }
    #anonDetails p{margin:0px;}
    #commentCompose {margin-bottom:10px;}
    #commentCompose label{display:none;}
    .validation-summary-errors{
        background-color:#FFFFCC;
        border:1px solid #CC0000;
        font-weight:bold;
        margin:10px 0;
        padding:10px 20px;
        list-style:none;
    }
    .validation-summary-errors li{margin-top:5px;background:transparent url(images/sprite.png) no-repeat 0 -72px;display:block;padding:1px 0 5px 25px;}

That is all.

I will be more than happy if you will join to discussion in comments below.

Updated: currently we released the premium theme "Customized" in our Theme Directory and you can visit this showcase page in detail and order it there for your dnn blog page with SunBlogNuke.

Alternative Monthly List for DNN Blog Archives

Baldwin — Tue, 29 Nov 2011 21:56:07 GMT

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

Fancy Gallery Extension with Lightbox effect Inside DNN Blog

Baldwin — Sat, 12 Nov 2011 22:40:09 GMT

Why it built?

In common, you can build the awesome blog post with some media files, and sometimes you would like to share lots of images with your friends. Yes, you want to build an album with those images in the blog post content. But it looks difficulty to incorporate display for larger images, which under normal situations would break the layout of this site. It will save lots of our time if there is some way to automatically organized images with clean & elegant layout and we just copy/insert images into Rich-Editor or WLW.

Congratulations. The "Fancy Gallery" extension is the exact tool for your dnn blog. And it is another extension for Ultimate DNN Blog Module – SunBlogNuke. You just feel free to add your images and this extension will do the rest for you – automatically convert them into one fancy gallery with lightbox effect.

How it works?

To apply the blog extension, it is so easy and just follows up the simple steps below:

1) Make sure that you have installed SunBlogNuke v4.8.+ for your DNN blog page.

2) Download it from the extensions directory.

3) Unzip it and upload the extension assembly file SunBlogNuke.Extensions.FancyGallery.dll into the folder $ROOT/bin. Then upload another folder into blog extensions folder $ROOT/DesktopModules/SunBlog/Extensions.

Until now it has been deployed. Next I walk you through the process to add images when writing post:

1) Enter “Edit Post” panel (Or connect WLW) and focus on the Rich Editor.

2) Add images with tool button “Insert Image” of editor. Don’t worry about the layout and just make them sequence placed there.

3) Add token in the end of all the images. Note that it is the key step and make sure that all the images for album is closed in the middle section of those two tokens. It looks like that: (Red circle is your images section)

4) Complete other configurations of current post and click "update" to save it into db.

That is all. It should work like a charm - when visiting the post detail, you will see the auto-built gallery with your images in your blog post.

Summary

With a little bit of setup, it is possible to quickly add lightbox image effects to a DotNetNuke site with specific desires to implement it in the Blogging/Articles module for blog/other content.

As always, feel free to post comments/suggestions below or if you are having difficulties implementing this on your site you may post to the community forums!

Download Demo

Free Twitter Feed Widget for DNN Blog

Baldwin — Mon, 07 Nov 2011 14:35:06 GMT

If you are finding a highlight solution to display your most recent Twitter updates on your DNN website, the "Twitter Feed widget" module will be exactly what you need. With the free widget, it is easy to integrate the twitter feed into the sidebar of dnn blog to show your latest tweets.

Out of the box, you just need to specify the public twitter account info (username) and this dnn widget will do the rest for you. Moreover, you can control how tweets are displayed from widget settings panel, such as Number of displayed Tweets & whether to Show Replies. The cache mechanism also let your dnn website avoid critical website load traffic. Have a look at the screenshots below:

Tweets list with different dnn container styles:

Widget settings panel for configuration:

Note: this module relies on twitter's public profile API and it can only list the tweets of public account. It is unavailable for private accounts.

Next we will enhance it with template-driven mode and include the extendibility to be completely customized with lots of different look & feel based your expectations.

If you have any good advice about our products, please feel free to leave a comment or contact us via email. :)

Download it from Snowcovered »