Actually the vote/digg feature, which allows registered users to vote for your blog posts, was supported from Ultimate DNN Blog Module – SunBlogNuke v4.0 but it is not active in default. It requires some customizations to integrate with. Today we would like to share you how to apply the awesome feature into your dnn blog.

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:

    vote_code
  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:

basic_vote

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:

advanced_vote

  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">&nbsp;</div>
    <a class="vote diggit" title="Thumb Up" rel="nofollow">&nbsp;</a>
    <a class="vote buryit" title="Thumb Down" rel="nofollow">&nbsp;</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.