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.

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

1) Getting Started DNN Blog module – SunBlogNuke

This video tutorial covers how to get started your dnn blog with SunBlogNuke, including how to add blog module into page, create new blog instance, write first post & configure some basic settings.

2) How to Styled & Customized DNN Blog

This video tutorial covers how to style & customize more stuffs in SunBlogNuke.

3) Play with Blog Widget Module

This video tutorial covers how to play with so lots of awesome widget modules of SunBlogNuke; plus you can place any of them in any page at any time and point it to any blog on the portal.

BTW, if you have more tricks and tips about SunBlogNuke, please share it for us and then you will be able to extend longer subscription for our module(One year free upgrade in default). We are looking forwards to your news :)

Blog your way & enjoy life.

The SunBlogNuke Team

As Facebook is the leading global social networking website, you are able to increase your web presence by leveraging the power of the social graph. Today we released a new extension called 'OpenGraph', which allows you easily integrate Ultimate DNN Blog Module - SunBlogNuke and the Facebook’s open social graph.  If you are familiar with our blogging product, you may ever apply the way mentioned in the older tutorial - Facebook Like Button Making Your DNN Blog more Attractive. From v4.7, the 'OpenGraph' extension will be better choice for this extended requirement.

The main code as follows:

/// 

/// Add the Facebook social meta tags to your blog.
/// 
/// the current page
/// the current blog post
private void AddOpenGraphMetaTags(CDefault basePage, EntryInfo entity)
{
    basePage.HtmlAttributes.Add("xmlns:og", "http://opengraphprotocol.org/schema/");
    basePage.HtmlAttributes.Add("xmlns:fb", "http://www.facebook.com/2008/fbml");

    PortalSettings settings = basePage.PortalSettings;
    if (settings == null) settings = HttpContext.Current.Items["PortalSettings"] as PortalSettings;

    HttpRequest request = HttpContext.Current.Request;
    string PortalBasicUrl = Globals.GetPortalDomainName(settings.PortalAlias.HTTPAlias, request, true);
    string logoImg = string.Format("{0}/Portals/{1}/{2}", PortalBasicUrl, settings.PortalId, settings.LogoFile);
    AddMetaTag(basePage, "og:title", entity.Title);
    AddMetaTag(basePage, "og:type", "Blog");
    //AddMetaTag(basePage, "og:image", settings.HomeDirectory + settings.LogoFile);
    AddMetaTag(basePage, "og:image", HtmlTextUtils.GetFirstImageSrc(HttpUtility.HtmlDecode(entity.Entry), logoImg));
    AddMetaTag(basePage, "og:url", entity.Permalink);
    AddMetaTag(basePage, "og:site_name", settings.PortalName);
    AddMetaTag(basePage, "og:description", HtmlTextUtils.FormatDescrption(entity.Description, entity.Entry, 255));
    AddMetaTag(basePage, "og:email", settings.Email);
}

private void AddMetaTag(CDefault basePage, string name, string content)
{
    string tagToken = string.Format("", name, content);
    LiteralControl litLinks = new LiteralControl(tagToken);

    basePage.Header.Controls.Add(litLinks);
}

You may notice that here we apply the image meta tag with the first image found in the post. If not exist, use the portal logo. If you are developer, feel free to modify it with other customized logic.

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

1) Download it from the extensions directory.
2) Unzip it and upload the extension file 'OpenGraph.cs' into the folder $ROOT/bin/Blog_Extensions. If not exist please create it at first.
3) Open up the web.config and add the directory 'Blog_Extensions' in the element [codeSubDirectories] as follow:

<codeSubDirectories>
  <add directoryName="HTML" />
      <add directoryName="Blog_Extensions" />
codeSubDirectories>

That is all. It should work like a charm - when visiting the post detail, it will automatically add the Facebook social meta tags to your blog post.

Please visit our showcase gallery to see how it action with integrated with social bookmarking. Take a look at the screenshot:

Just search term 'blogml to wxr' in Google you should get lots of similar converters. Here we recommend this simple converter, which works well with our exported file. The tool is a Windows console application that takes two parameters, the BlogML import file and the WXR output, i.e.:

BlogMLtoDisqus.exe C:\BlogML.xml C:\ForDisqus.wxr.

To export comments of SunBlogNuke to Disqus, please follow up the simple steps below:

1. Login in your blog dashboard of SunBlogNuke with host/admin account.
2. Go to 'Import/Export Panel' and click 'export' button to download the full BlogML export from your dnn blog.
3. Provide that you have placed the console tool & the export file in the folder d:\. Go to the folder and execute it in the command window like that:
   
   BlogMLtoDisqus.exe d:\BlogML.xml d:\ForDisqus.wxr
   
   Note that you’ll need to install .NET 4.0 as well if you don’t already have it. If you can’t convert it successfully, you can send us the exported blogml file and we will help you deal with it.
4. If there is no error throwing, now you should get the converted WXR file. Next just feel free to import it under the Generic option in Disqus.

If you have more questions about  this topic or blogging,  Please feel free to post a comment below.  I’ll be happy to help.

1) Multiple blogs

Question:

"I was wondering if we can add this instance of module in 2 different pages in the same portal. The two modules should have different blogs, which means module1 on page1 shouldn't show blog contents of module2 on page 2 and vice-versa.

Would that be possible?"

Solution:

Yes, you can build multiple blog instances in different pages with different contents. Just add it and assign them in the edit blog panel with specific tab (page). Please refer to the tutorial in detail - Setting up Multiple Blogs.

2) Multiple authors

Question:

"We would like to use the blog module in a team environment where anyone on the team could post an entry to the same blog. The individual user should be credited as the author of the entry (rather than using a shared, generic login).

Ideally, the blog owner (or site admin) should be able to designate individual blogs as either "shared" (multiple contributors) or "personal" (a single author)."

Solution:

Fortunately SunBlogNuke offers team blogs from its initial building and it is so easy to set up multiple authors. Please refer to the tutorial in detail - Blogging with Multiple Authors.

Basic sample:

1. Check out which theme you are applying for the blog in the ‘Theme’ admin panel. Just make sure that it is not default theme because the default theme is deny to modify for any customizations.
2. Switch to the ‘Theme Editor’ panel and choose the theme view file to apply the vote feature. Here we choose the detailview.ascx in this sample, so append the declaration in the top firstly and  add vote control in the bottom as follows:
   

   <%@ Register TagPrefix="uc" TagName="Vote" Src="~/DesktopModules/SunBlog/Shared/Vote.ascx" %>
   <uc:Vote ID="widgetVote" runat="server" EnableViewState="false"/>

   The screenshot should be like that:
   
   
3. To make the vote section look awesome, you may need to append some styles in the theme css file – style.css. And you can complete this task in the same 'Theme Editor' panel with editing the style.  The following style is common to use for vote:  (Icon Resource)
   

   /* DIGG */
   .diggbox{position:relative;height:100px;width:60px;background-color:#fff;}
   .vote{
       background:url(images/up_down.png) no-repeat scroll 0 -30px #CCCCCC;
       border:0 none;
       height:30px;
       left:0;
       position:absolute;
       text-indent:-9999px;
       width:60px;
       cursor:pointer;
   }
   .diggit{top:0;}
   .buryit{background-position:0 -60px;bottom:0;}
   .diggbox .diggit:hover, .diggbox .diggit:focus {background-color:#8fd910; background-position:0 0;}
   .diggbox .buryit:hover, .diggbox .buryit:focus {background-color:#d52810; background-position:0 -90px;}
   .diggbox .result{
       display:block; 
       padding-top:30px; 
       font:bold 25px/40px 'Myriad Pro',sans-serif; 
       letter-spacing:-0.05em; 
       text-align:center; 
   }
   span.burynum,span.diggnum {
       color:#075DB3;
       display:block;
       font-size:12px;
       text-align:center;
       width:40px;
   }
   .votecount{display:none;}

That is all, the vote feature will work like a charm in the detail view of your blog posts like the screenshot below:

Advanced Sample:

In the basic sample, we knew that the vote control is placed in the folder SunBlog/Shared and is named 'Vote.ascx'.  Now you may like to develop a customized vote widget like the one below and is applied in our team blog . How to get start? Okey,  let us go through the magic process:

1. Copy the vote.ascx control and paste it into our customized theme folder. We named it 'VoteTheme'  in this sample.
2. Open it up with html editor like Visual Studio 2008 and replace all the existing code with the following one:
   

   <%@ Control Language="vb" AutoEventWireup="false" Inherits="SunBlogNuke.Toolkit.UserControls.Vote" %>
   <div id="digg_<%=Entry.EntryID%>" class="diggbox">
       <div id="do_you_like"> div>
       <a class="vote diggit" title="Thumb Up" rel="nofollow"> a>
       <a class="vote buryit" title="Thumb Down" rel="nofollow"> a>
       <div id="votes_count">
         <strong class="diggnum votecount"><%=Entry.DiggNum%>strong> Thumbs Up, 
         <strong class="burynum votecount"><%=Entry.BuryNum%>strong> Thumbs Down
       div>
       <br />
       <span class="diggtip">span>
       <span class="diggedType" style="display: none;"><%=VerifyDigg()%>span>
   div>

3. Now follow the same steps mentioned in the basic sample.  Apply the 'VoteTheme' for your blog and enter the 'Theme Editor’ panel. Append your vote control in the detailview.ascx like that:
   

   <%@ Register TagPrefix="uc" TagName="Vote" Src="~/DesktopModules/SunBlog/Themes/Customized/Vote.ascx" %>
   <uc:Vote ID="widgetVote" runat="server" EnableViewState="false"/>

   Then add new vote style. (Icon Resource)
   

   /* VOTE */
   #feedbackC{border-top:1px dotted #666666;border-bottom:1px dotted #666666;padding: 14px 0;}
   .diggbox{
       /*float: left;
       width: 344px;*/
       margin-right: 10px;
       padding-left: 16px;
   }
   #do_you_like {
       background: url(images/vote.png) no-repeat scroll -18px -14px transparent;
       height: 23px;
       margin: 0 0 2px 2px;
       width: 154px;
   }
   a.vote {
       background:transparent url(images/vote.png) no-repeat scroll 0 0;
       display: block;
       float: left;
       height: 32px;
       width: 58px;
   }
   a.vote:hover{text-decoration: none;}
   a.diggit {
       background-position: -420px -60px;
       margin-left: -6px;
       margin-right: 3px;
   }
   a.buryit {
       background-position: -420px -10px;
       margin-right: 15px;
   }
   a.diggit:hover {background-position: -345px -60px;}
   a.buryit:hover {background-position: -345px -10px;}
   #votes_count{color: #424242;margin-top: 10px;}

Code Explanation: Basically, in the develop process you just need to know well those required elements as follows:

• The element with style class 'diggit ' fires the event – thumb up.
• The element with style class 'buryit ' fires the event – thumb down.
• The element with style class 'diggnum ' shows the number of up votes.
• The element with style class 'burynum ' shows the number of up votes.
• The element with style class 'diggedType ' controls which type of the current voting, up or down.

Finally our development team implemented the custom fields feature for Ultimate DNN Blog Module – SunBlogNuke in the upcoming version 4.2, which will be available soon.  The use of custom fields will be one of the keys to SunBlogNuke’s flexibility and endless possibilities. Essentially, all a Custom Field does is allow you to add extra pieces of data to individual DNN Blog posts that otherwise aren’t there by default. We hope that it  will change the way people look at SunBlogNuke and rise in popularity of SunBlogNuke, too. 

The first thing you need to know is where to input custom fields. On “Edit Post” in the SunBlogNuke Dashboard, there is section at the bottom of the page that lets you input as many custom fields as you want.  A custom field consists of two different concepts — “Key" and “Value". The Key is the name of the custom field and the Value is simply the value you want to give to that name. It doesn’t get much simpler than that. In this tutorial, I’ll show you how you can easily add thumbnails to individual posts in SunBlogNuke. These images can be shown on the Content Slider Widget , archives, blog home pages, etc – but appear outside of the content, giving you full control of their placement and style.  Okay, let’s go through those simple steps below:

1) Simply start making a New Post and scroll down “Custom Fields” section.

2) Just fill in the Key with “thumbnail”.  For the Value, post the full URL of the thumbnail you would like to use. Click “Add Custom Field”, and it will apply to that post.  (Optional: you can also create a key named "Thumbnail Class”. Give it a Value of “thumbnail-class” or anything that you can use to style in your stylesheet (style.css). Or you can create alt text for your image with creating a Key named "thumbnail-alt” with a Value of “Describe your image.” If you don’t do this, the alt text will default to the post title.) Like that screenshot below:

Note that if  you have a key called Thumbnail, you’ll never have to create that key again.  It’s stored so you may select it from the dropdown box for now on.

3) Add the following code in theme view file “BasicView.ascx” in order to show our newly created thumbnails in recent post list: (Please get more details about theme mechanism from the tutorial - Develop Your Customized Theme for DNN Blog Module)

<%
    Dim thumbnailUrl As String = GetCustomField("thumbnail")
    Dim thumbnalClass As String = GetCustomField("thumbnail-class")
    Dim thumbnailAlt As String = GetCustomField("thumbnail-alt")
    If Not String.IsNullOrEmpty(thumbnailUrl) Then
        %>
        <img src="<%=thumbnailUrl%>" alt="<%=thumbnailAlt%>" class="<%=thumbnalClass%>"/>
        <%
    End If
%>

4) Or use it in Content Slider Widget like that:

{block:customfield:thumbnail}
<img src="[customfield:thumbnail]" class="[customfield:thumbnail-class]" alt="[customfield:thumbnail-alt]"/>
{else}
<img src="YOUR_DEFAULT_THUMBNAIL" class="[customfield:thumbnail-class]" alt="[customfield:thumbnail-alt]"/>
{/block:customfield:thumbnail}

The block code section means that with it you can check out whether the custom field [thumbnail] is null or empty, if not it will append the code snippet as follows:

<img src="[customfield:thumbnail]" class="[customfield:thumbnail-class]" alt="[customfield:thumbnail-alt]"/>

otherwise it will append the code snippet after the token {else} as follow: (Replace the ‘YOUR_DEFAULT_THUMBNAIL’ with your real thumbnail url)

<img src="YOUR_DEFAULT_THUMBNAIL" class="[customfield:thumbnail-class]" alt="[customfield:thumbnail-alt]"/>

Well, that is all but I would like to say that the tutorial is only a start for you and the truth is that you can do pretty much anything you want with custom fields. Your imagination is your limit.

As usual, please let me know your thoughts with leaving your comment below and make sure to enter your suggestions for improving our product at support forum.

Hope you all well and thanks a lot for your love and trust SunBlogNuke. A LOT are going on for providing you the best publishing tool for your dnn website,  like online magazines, newsletters and article catalogs.

Now we have been busy wrapping up development of the next version of the Blog module (4.1.0) and I would like to get some of the most pressing features included with this release, like import external blog data with blogML format (you can find more details about it in that post – Migrating from WordPress to DNN Blog). Here I prefer to share another awesome blog feature – threaded (nested) comment, which is included in the roadmap of Ultimate DNN Blog Module – SunBlogNuke and also lots of clients request from the time our blogging module born.

What benefit of threaded comments?

If you are getting enough number of comments, then you may have faced problem while answering or replying to them. Though you can reply to them with a comment,  the problem is that it doesn’t make the comment look interactive or in other words conversation appears broken. So the better solution to all such problem is having Threaded Comments. Now SunBlogNuke already provided this cool feature.

How to get it work in SunBlogNuke?

To enable threaded comment on your blogs, simply go to the "Settings" screen and activate it with checking the option “Enable threaded comment with x levels deep".  Note that it only works if the theme supports it. You can refer to “CommentView.ascx" in the _default theme and you will find that you just need to append the following codes in your CommentView file (if you are not familiar with theme mechanism please get more details from the tutorial - Develop Your Customized Theme for DNN Blog Module):

Threaded comments section:

<div class="annotation-replies" id="replies_<%=Comment.CommentID%>">
  <asp:PlaceHolder ID="phSubComments" runat="server" />
div>

ReplyToLink section (‘<%=Comment.ReplyToLink%>’ is what you need to append and you can place it anywhere you think more appropriate):

    <span class="annotation-meta">
        Posted by <%=FormatAuthor("author")%> on <i><%=Comment.AddedDate%>i>
          <%=Comment.ReplyToLink%>
    span>

Then in order to let your threaded comments more cool, you may append some styles in your theme file style.css like that below.  That is a style sample and I think that I think your style will be more awesome and our module can provide the capabilities.

.annotation-replies{clear:both;background:url(images/reply-arrow.gif) no-repeat;margin:5px 0 0 5px;padding:0 0 0 15px;}

Once you have done this you will reply the comments to build  an interactive conversation for your blog entries (as show in the screen capture below).

As usual, please let me know your thoughts with leaving your comment below and make sure to enter your suggestions for improving our product at support forum.

A special thanks goes out to Matt Marlor for pushing Will and I to finally make this happen.

You can get it here. Enjoy blogging and good writing! :)

The SunBlogNuke Team