The vast amount of cool customizations maybe one of the reasons why people choose Ultimate DNN Blog Module - SunBlogNuke instead of using other blog services basing on DotNetNuke platform. Today what I would like to show you one of those cool things is tag cloud widget.

What is tag cloud?

For those who are unfamiliar with tag cloud, it is a visual depiction of user-generated tags, or simply the word content of a site, typically used to describe the post content of your blog. Tags are usually single words and are normally listed alphabetically, and the importance of a tag is shown with font size or color. Thus, both finding a tag by alphabet and by popularity is possible. Tag cloud not just enables people to find information they are looking for, but also usually offer a more adventurous mode of navigation. You can visit the wiki link for the more details. -

This is what a common tag cloud widget looks like:

common tags cloud

Tag Cloud Widget in SunBlogNuke

From the enhanced version 3.7.0, we extended the tag cloud widget with alternative presentation way - Flashy Rotating 3D Tag Cloud which can be originally accessed when clicking "View All Tags". It will display tags your blog article look three-dimensional (3D) with a form that can be turned/rotated, looked more unique and interesting. Take a look at the screenshot below:

You can set colors that match your theme and customize more options on the widget's settings panel. Later we will go through them in the configure process. :)

How to install and configure it for your dnn blog?

  1. Login your dnn website with host account.
  2. Install or upgrade Ultimate DNN Blog Module – SunBlogNuke v3.7.0 or later version as any standard dnn core module.
  3. Return to "Module Definitions" page and enter "Import Module Definition" from the left-top action menu.

  4. You should find out "TagCloudWidget_install_for_dnn5.x.dnn" if your website is basing on dnn v5.x or "TagCloudWidget.dnn" for dnn 4.x website in the manifest list like the screenshot below:

    Import_Module_Definition

    Then click "Import Manifest" to import the "SunBlog - TagCloud Widget" definition.

  5. Switch into your target page where you would like to insert the tag cloud widget, for example, the home page of our website.
  6. Add the "SunBlog - TagCloud Widget" module into the current page from the modules panel in the top.
  7. Enter the widget settings from the left-top action menu of the target dnn module.
  8. Configure the target blog and switch into "Flash" mode, then it should expand the advanced options for the 3D tag cloud.
  9. Customize its background color, width, height movement speed and more like that:

    WP Cumulus Options

  10. Click "Update"

Note that:

  • If you configure "common" mode, in order to build a fascinating tag cloud you may need to attach some additional styles in your page like including them in your skin.css. You can refer to the sample code below (which applied in our home page): 
    /* Tagcloud Style */
ul.tagcloud {clear: both;list-style-type: none;position: relative;margin: 0px;padding: 0px;}
    ul.tagcloud li {position: relative;padding: 0 3px 0 5px;line-height: 26px;display:inline;} 
    ul.tagcloud a{color:#D44314;white-space:nowrap;text-decoration:none;} 
    ul.tagcloud a:hover{color: #000;}
    ul.tagcloud div.ahover {position:absolute;background-color:#C00;padding:5px 0;}

    Also you get the more tag clouds style from the link - Tag Clouds Gallery: Examples And Good Practices.

  • The "IntegratedWithSwfobject" option is required if your page does not include swfobject javascript.

Well done, that is all. Congratulations, your widget will work like a charm. Please visit the demo link to see how it action.

If you have any feedback or question, please feel free to post a comment below or send us a note. Thanks a lot.