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

As you know, our dnn blogging module – SunBlogNuke supports the remote 3rd-party publishing tool, in other words, you can use a third-party Desktop/Mobile application for your dnn blog which we call it “Remote Posting”. Microsoft Office 2010 is one of remote Posting app with just a few simple steps. It indeed makes publishing a blog post so easy that you might just be in total amazement. Please refer to the tutorial for more instruction - How To Create and Publish Blog Posts in Word 2010 & 2007. And some following notes you should know:

1) Connecting SunBlogNuke with Microsoft Office 2010/2007, you need to fill in the "Blog Post Url" with the link "http://www.domain.com/DesktopModules/SunBlog/MetaWeblog.ashx". Just replace "domain" with your real domain name.
2) Unfortunately, Microsoft Word still doesn’t let you add things like tags, custom fields, SEO options, etc; so it is probably a good idea to choose the Publish As Draft option so that you can add those things and then publish from your blog.

In the end, we would like to let you know that actually we prefer to use Window Live Writer as remote publishing tool and it supplies more flexible features :)

Active Social Bookmarking

Configure it in the Reading Settings panel, where you checked the option or uncheck like that:

As for the "ShareBox " script, just need to replace your publisher id with yours. The sample url is like this below:

http://w.sharethis.com/button/sharethis.js#publisher=xxx_id&type=website&headerTitle=Share this post

You can also customize the parameter [headertitle]. 

You can see how it in action here  - Bookmarking Widget in the end of this post. Even more you may be interested in implemented more sexy social bookmarking plugin, please refer to another tutorial - Integrate SexyBookmarks into DNN Blog and you will be surprised. :)

Customized Social Bookmarking Widget

Here we provided the "ShareThis" bookmark widget as sample. Just follow up the steps below:

1)  Go to the ShareThis website and create the button as you want.

2) With HTML editor, open up the theme view file - detailview.ascx in your current theme folder. (If you are not familiar with the theme mechanism, please refer to the tutorial - Develop an Customized Theme for SunBlogNuke)

3) Find out the original bookmarking control like this below:

<uc:Bookmarks ID="widgetBookmarks" runat="server" EnableViewState="false"/>

then remove it and append your generated button code in the step 1) in the same place.  Finally it may looks like that:

<div class="bookmarks">
    <h3><%=LocalizeByKey("ShareThisPost")%>h3>
    <span class='st_twitter_vcount' displayText='Tweet'>span>
    <span class='st_email_vcount' displayText='Email'>span>
    <span class='st_facebook_vcount' displayText='Facebook'>span>
    <span class='st_sharethis_vcount' displayText='ShareThis'>span>
    <script type="text/javascript">var switchTo5x=true;script>
    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js">script>
    <script type="text/javascript">stLight.options({publisher:'xxx_publiser_id'});script>
div>

4) Save it and it will work like a charm.

You can see how it in action in the every post detail of our Showcase Gallery page.

Hope you like this tutorial and find some helpful things in this. Feel free to ask anything about the article in comments section.

Blog your way and share it enjoyable.

1. Make sure to active the Metaweblog service and build your blog account. Like integration with wow, if you are able to write post with window live writer, the configuration is all right for autopost.
2. Go to the dashboard of your Posterous blog. If not exist, you may need to sign up your account and build your blog there firstly.
3. Click "autopost" tab in the dashboard, like the screenshot below:
   
4. Click the button "Add a service" and it will pop up a window with list of services to set it up for Autoposting. In order to integrate with SunBlogNuke, just click the link “Other Blog” to open the configure panel titled “Link Your Meta Weblog Account”.
5. Fill in your blog home url & author account information like below and Complete it with clicking the button "LINK".
   

Congratulations. Now you should be able to autopost your Posterous post to your dnn blog, which is built with Ultimate DNN Blog Module – SunBlogNuke. Hope it helps. Blog your way and enjoy life. :)

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

Today we released the new SEO extension - the alternative way to build the canonical link for your dnn blog post to avoid duplicate Urls. 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 Canonical.cs' into the folder $ROOT/bin/Blog_Extensions. If not exist please create it at first.
3) Open up the web.config and make sure that the blog extension element there. If not exist, add the directory 'Blog_Extensions' in the element [codeSubDirectories] and it looks like 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 canonical meta tags to your blog post.

BTW, you may be interested in the similar guidelines about other awesome blog extensions:

Integrated Social Graph into DNN Blog

Post Comment to Journal of Active Social

Hope it helps. Blog your way and enjoy life. :)

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.

Comment Approval:

Now content moderator will receive an email with link to access for comment approval when any pending comment posted. You can one-click this link to approve them quickly. Also, you can directly fill out the similar url in the browser address to access the feature:

• Approve action: http://domainname.com/yourblogpage/?type=comment&cmd=approve&id=comment_id
• Reject action: http://domainname.com/yourblogpage/?type=comment&cmd=reject&id=comment_id

Note that you need to replace the "domainname" & "yourblogpage" with correct values; comment_id is the id of target comment what you would like to approve or reject.

Regenerate Permlinks:

You may need to regenerate your post permlinks when transferring your dnn blog into your productive server or applying any 3rd party url rewrite module. You can complete this task in the general settings panel of dashboard; Or one click access for generating all the post urls like that below:

http://domainname.com/yourblogpage/?type=post&cmd=generatelinks

Next we will introduce more handy commands, such as one click access for Content Approval, and hope that it will make your life good and enjoy blogging.

One of the questions my clients most often ask is: “How do I make sure my dnn blog is SEO friendly and still interesting for my readers?”.  Below are some tips and tricks with the built-in features of Ultimate DNN Blog Module – SunBlogNuke, that will help you catch search engines’ attention and optimize your blog posts.

Blog Post/Article Structure

Title

The post title will show in the browser tab bar (called ‘Meta Title’) and it should use one but no more than two primary keywords with one keyword being the first word of the title.

Using more than three or more key words in a title may result in your post being ignored/penalized by search engines for ‘keyword stuffing’ or ‘blog spam’. Just keep in mind that Google pays particular attention to titles - so make sure you get them right. And you can get more SEO tips about blog title from this post 10 Tips to Awesome, Eye-Jerking Post Titles.

Friendly Url with Post Slug

This post slug is the alternative title for your post and we build friendly seo post url with it if not empty. By default, the post slug will be automatically retrieved from the blog post’s title provide you check the option [Show SEO Friendly URL] in the blog settings panel.  For example, by default, some specific post having the following URL:

http://www.yourwebsite.com/5-Killer-Features-will-be-Available-on-SunBlogNuke.aspx

Unfortunately, this is not a very search engine friendly URL, as many of the keywords with meaningless words, such as the word "will" & "be", are at the end of the URL.  By setting your own custom post slug, you are able to create a better URL for the post:

http://www.yourwebsite.com/Killer-Features-SunBlogNuke.aspx

In this case, the post url focuses on the keywords for this post, creating more emphasis on them.  The great thing about this tip is it takes a very minimal amount of time to do and will become second nature once you’ve turned it into a habit. If unchecked the option [Show SEO Friendly URL], we also provide the one click utility feature to extract the post slug from title and adjust it into your expected value.

Meta Description

The description (META Description tag) is a one or two sentence statement that tells the reader what your blog post is about when those posted founds in search engines. And it should be a maximum of 150 characters and contain at a maximum of two keywords. But out dilemma is, how do we populate the “content” section of the META description dynamically based on what content we’re viewing?  Simple — we use a combination of conditional tags and a custom loop to pull either the page title (if we’re on the homepage) or the description (if we’re in a single post). With that our blog platform will create such unique description tags for each post page. Usually, most bloggers don’t take advantage of the use of the “optional description” section of their Write Post panel. But if you want to exercise even more control over what gets displayed on the search engine results page(SERP) for content, then you need to be filling this section out.  If this field is blank, your post description will be generated with the first 150 characters in your post.

Meta keywords

The SunBlogNuke also support Meta keywords with a combination of page key words and all tags of each post. But recently Google Confirms Meta Keywords Tag Not used for Rankings, you just ignore it and let it there now.

Canonical Link

Google, Microsoft and Yahoo announced support for a new 'Canonical Link Element' in the header of your website page that will help clean-up duplicate url's that have been indexed by search engines. This issue is so specially serious in DotNetNuke that there are duplicated contents returned for different urls. For example, the link 'domain.com/default.aspx?tabid=38'  and 'domain.com/home/tabid/38/default.aspx' retures the same page of content in your dnn site.  As for our blogging module, you can build the canonical link for your post to avoid duplicate Urls. Just insert the following code in the top of the current theme file  detailsview.ascx like that:

VB.NET version:

<script language="vb" runat="server">
    Protected Overrides Sub OnInit(ByVal e As EventArgs)
        If Entry IsNot Nothing Then
            AddGenericLink("canonical ", String.Empty, Entry.Link)
        End If
    End Sub
script>

C# version:

<script language="c#" runat="server">
    protected override void OnInit(EventArgs e)
    {
        if (Entry != null) AddGenericLink("canonical", string.Empty, Entry.Link);
    }
script>

Note that it just works v4.6+. As for the older version you also apply it with the similar way.

I hope this has helped answer the question about how to make your dnn blog posts SEO Friendly as well as interesting for your readers. Though SunBlogNuke comes with several built-in features for SEO, please you should know that “Content is King". The quality of the posts you write is the single most important factor when it comes to Search Optimization on a blog engine, such as awesome tutorials that help people will quite often draw a reader to want to share what they’ve written. If you have more questions about  this topic or blogging,  Please feel free to post a comment below.  I’ll be happy to help.

jQuery sliders have been spotted to be commonly used in lots of website to display the images/contents in different impressive ways. Since apart from showing large amount of core site content in a limited space on a website, any jQuery slider also has a great capability to engage the viewers and trigger their interest towards what is being shown to them. In the DNN platform,  it’s also a very popular functional widget and there are lots of slider modules for sale in the snowcovered.com. In my opinion, those modules have the vital disadvantage that they are built with static contents and independent with any content publishing tool. In the end you have to modify them one by one if you want to make it look more dynamic. Now we would like to share the alternative useful tool with building neat, elegant and versatile site components with dynamic effects. Yes, that is the Content Slider Widget(CSW) for Ultimate DNN Blog Module – SunBlogNuke.

With the help of jQuery & CSW, you will be able to create any super content sliders with your dnn blog posts. So if you’ve been wondering how jQuery content sliders are accomplished and want to try implementing some of them on your DotNetNuke website, here this tutorial will help you with that.  Today we just showcase the amazing slide thumb on how to make viewing images or other site content more comforting and intuitive. Take a look at how the slide thumbs actions – demo link. Then let’s go ahead.

In the beginning, please refer to the similar tutorial [Create an Awesome Content Slider with SunBlogNuke] for some basic concepts, such as custom fields. This slide thumbs requires one original image with a smaller thumbnail for navigation at the bottom. Here we just build the thumbnail with custom field key called "thumbnail" and retrieve the first image from the post content for the original image, for which you can utilize the token [THUMBNAIL]. All right, suppose that the blog posts are ready to showcase now. Next just follow up the steps below:

1) Complete the similar preparation process mentioned in the tutorial [Create an Awesome Content Slider with SunBlogNuke]. The folder called 'slide_thumbs' in this sample and please download it here.

2) Enter the 'Widget Settings' of Content Slider Widget.

3) Fill in the external utility scripts and it should formatted as http://yourdomain.com/portals/XX/slide_thumbs/slide_thumbs.js.

4) Fill in the external utility styles and it should formatted as http://yourdomain.com/portals/XX/slide_thumbs/style.css.

5) In the "Extra Template" text area, enter the following code:

{block:first}
<div id="preview_wrap">
<div id="preview_outer">
<div id="preview_inner">
<div><img src="[THUMBNAIL]" alt="[TITLE]" />
<a href="[LINK]">[TITLE]a>
div>
{/block:first}
{block:last}
<div><img src="[THUMBNAIL]" alt="[TITLE]" /><a href="[LINK]">[TITLE]a>div>
div>
div>
div>
{/block:last}
<div><img src="[THUMBNAIL]" alt="[TITLE]" /><a href="[LINK]">[TITLE]a>div>

It built the main section to show the original image with some fields, like post title & link. The extra template is totally new option and it is introduced in the CSW from v4.5. And you maybe have noticed the new tokens  {block:first} & {block:last}, with which creating flexible layout will be more easier and handy to use. Just remember how to user them as follows:

{block:first}xxx{/block:first} : it wraps the first item in the list and you can stand up it with different tokens or tags. For example you can wrap the started container tag

here.

{block:last} xxx{block:first} : it wraps the last item in the list and you can stand up it with different tokens or tags. For example you can wrap the closed container tag

Note that the left tags exclude the block sections {block:first}xxx{/block:first} and  {block:last} xxx{block:first}  will be the common item template.

6) In the "Item Template" text area, enter the following code:

{block:first}
<div id="thumbs">
<div id="arrow">
div>
<span><img src="[customfield:thumbnail]" alt="[TITLE]" />span>{/block:first}
{block:last}<span><img src="[customfield:thumbnail]" alt="[TITLE]" />span>div>{/block:last}
<span><img src="[customfield:thumbnail]" alt="[TITLE]" />span>

It built the thumbnail navigation in the bottom.

6) Click 'Upadte' to save all the modifies and the slideshow will work like a charm. Take a look at how the slide thumbs actions – demo link again.

ps: this tutorial was inspired by the post http://jqueryglobe.com/article/slide-thumbs.