Feeds:
Posts
Comments

Archive for November, 2010

A handy DotNetNuke module which can be used to share the current page link on the famous social bookmark services in a nice and interactive way. This module supports over 80 famous social bookmark services. This module is ideal for blogs, forums and article based sites.

This blog post will describe the simple steps on how to use DNN Fancy Social Bookmarks module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded DNN Fancy Social Bookmarks, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-2: Add Module to a Page

Once the module is installed, it will be available in the Module drop-down. You can add DNN Fancy Social Bookmarks (DNN_FancySocialBookmars) to your desired pane.

Add Module to Page

Add Module to Page

Step-3: Module Settings

Once module is added to the page, it will be displayed using the default settings. You can go to module settings page and scroll to bottom section “Fancy Social Bookmarks Settings” to customize the settings.  This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Bookmark Bar Icon Specify the icon for the social bookmark bar, possible values are: 

  • None
  • Share the Knowledge!
  • Share and Enjoy!
  • Share the Wealth!
  • Share the Love!
  • Sharing is Caring!
  • Sharing is Caring (Hearts)!
  • Sharing is Sexy!
Randomize Sites Select this check-box, if you want a random order of bookmark sites on each page load.
Bar Width Specify the width for the bookmarks bar.
Container HTML You can write your custom HTML. It can serve as wrapper around the slider. 

Use [DNN_FANCY_BOOKMARKS] in a place where you want to show the bookmark bar.

Step-4: Manage Bookmarks

By default 13 bookmark sites are added to each new module. You can manage these sites by going to “Manage Bookmarks (Pencil Icon)” link on the newly added module. This will show you listing of linked sites and available sites, on this view, you can:

  • Change Order of Bookmark Sites
  • Edit the Tool-tip for linked Bookmark Site
  • Remove (un-link) a Bookmark Site
  • Add (link) a Bookmark Site from Available sites list

See following screens for reference:

Manage Linked Sites

Manage Linked Sites

Link Available Bookmark Sites

Link Available Bookmark Sites

Edit Bookmark Site Tool-tip

Edit Bookmark Site Tool-tip

Step-5: DNN Fancy Social Bookmarks View

You are all set – now you can go back to the page where you added the module and now you can see the fancy social bookmarks in action.

Fancy Social Bookmarks in Action

Fancy Social Bookmarks in Action

Credits:

Idea for this fancy social bookmarks for DotNetNuker is taken from a WordPress plugin “SexyBookmarks“. You can find this plugin for other platforms at http://sexybookmarks.shareaholic.com/platforms

Possible Issues and Quick Resolution:

Bookmark bar not working:

Make sure jQuery 1.4.x or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module setting page.

This module uses PNG images and some features of CSS which are not supported on IE 6.0 and earlier versions.

Read Full Post »

Orbit Banner Slider is a slick jQuery based Banner/Image slider for DotNetNuke. This nice looking module lets you to create an effective & beautiful slider for images or banners of any size. Three different transition effects are supported. This module will help you to make the banner section more interactive and will allow you to show multiple images in the space of one image. This module can also be used as a product show-case.

This blog post will describe the simple steps on how to use DNN Orbit Banner Slider module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded DNN Orbit Banner Slider, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-2: Add Module to a Page

Once the module is installed, it will be available in the Module drop-down. You can add DNN Orbit Banner Slider (DNN_OrbitBannerSlider) to your desired pane.

Add Module to Page

Add Module to Page

Step-3: Module Settings

After adding the module, you can go to module settings page and scroll to bottom section “Orbit Banner Slider Settings”. This section contains settings specific to this module. See following screen for setting details.

Orbit Banner Slider Settings

Orbit Banner Slider Settings

Following table describes the available settings.

Setting Description
Animation Specify the animation mode between slides, possible values are: 

  • Fade
  • Horizontal Slide
  • Vertical Slide
Time Between Transitions Time between slide transition (milliseconds)
Animation Speed Animation speed in milliseconds
Show Navigation Show next/previous buttons on hover
Show Caption Show caption for all images where available
Show Bullets Show navigation bullets
Randomize Images Select this check-box, if you want a random image order on each page load.
Slider Dimensions Specify the width and height for the slider area.
Container HTML You can write your custom HTML. It can serve as wrapper around the slider. 

Use [DNN_ORBIT_SLIDER] in a place where you want to show the actual slider.

Step-4: Manage Images

Now you are ready to add images to the slider. You can click the “Manage Images (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify caption, link and order of display for images in this section. See following screens for reference.

Manage Images

Manage Images

Add New Image

Add New Image

Step-5: DNN Orbit Banner Slider View

You are all set – now you can go back to the page where you added the module and now you can see the slick banner slider in action.

Orbit Banner Slider in Action

Orbit Banner Slider in Action

Possible Issues and Quick Resolution:

Slider not working:

Make sure jQuery 1.4.x or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module setting page.

Circular timer animation is not displayed:

The circular timer animation is not supported on IE. It works well with other browsers.

Read Full Post »

You want to show category wise portfolio items on your DNN portal, this module is the solution. Filterable Portfolio Grid module can show portfolio items in the form of filterable and interactive grid. You can upload images along with caption, link and tags for each of the portfolio item.

If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. This module will help you to show the filterable portfolio items in a little more interesting and interactive way.

Filterable Portfolio Grid module can show portfolio items in the form of filterable and interactive grid. You can upload images along with caption, link and tags for each of the portfolio item.

This module is built using HTML, CSS and Java-script only. No Flash is used.

This blog post will describe the simple steps on how to use DNN Filterable Portfolio Grid module in DotNetNuke portals.

View Live Demo

Step-1: Install DNN Filterable Portfolio Grid

Once you have downloaded DNN Portfolio Grid, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-2: Add DNN Filterable Portfolio Grid to a Page

Once the module is installed, it will be available in the Module drop-down. You can add DNN Filterable Portfolio Grid (DNN_FilterablePortfolioGrid) to your desired pane.

Add DNN Filterable Portfolio Grid to a Page

Add DNN Filterable Portfolio Grid to a Page

Step-3: DNN Filterable Portfolio Grid Settings

After adding the Filterable Portfolio Grid, you can go to module settings page and scroll to bottom section “DNN_FilterablePortfolioGrid Settings”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Image Dimension Specify the width and height for each of the portfolio image.
Randomize Images Select this check-box, if you want a random item order on each page load.
Show Tag Icon Select this check-box, if you want to show a tag icon with the tag list on module view page.
Include jQuery Select this check-box, if you your portal does not already have jQuery.

Step-4: Manage Portfolio Items

Now you are ready to add portfolio items to this interactive grid. You can click the “Add Content (Pencil Icon)” link on the newly added module. This will show you listing of the portfolio items, you can upload images and can specify order of display for items in this section. See following screens for reference.

Portfolio Items Listing

Portfolio Items Listing

Add Portfolio Items

Add Portfolio Items

Step-5: Manage Tags

You can define tags that can be linked to each of the portfolio items. The same tags will be used to show filter items.

Manage Tags

Manage Tags

Step-6: DNN Filterable Portfolio Grid View

You are all set – now you can go back to the page where you added the module and now you can see the interactive filterable grid in action.

Filterable Portfolio Grid

Filterable Portfolio Grid

Possible Issues and Quick Resolution:

Grid not working:

Make sure jQuery 1.4.x or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module setting page.

Read Full Post »