There are some awesome ways to optimize your post footers, like related articles, subscription options, and social bookmarking icons allow readers to browse and share your content. Today I would like to share another ways you may be also interested in, display the author information at the bottom of each post. The following tutorial will provide you with the ability to show off the avatar, the biography with Ultimate DNN Blog Module - SunBlogNuke on your DNN website.

I’m sure that many of you may not be familiar with xhtml, css or vb.net but I assure you that this guide will walk you step by step through the process of installing this on your DNN website.  It’s really just a bunch of copying and pasting. And if you have any questions simply leave a comment and I’ll help you out.

  1. Make sure that you are a authorized author for some blogs which built by SunBlogNuke module.
  2. Login with your account, click your name link and enter the core profile panel. Then you need switch to the profile tab and scroll down to the biography textbox and fill in some information as your biography, like a link to that author's site and his twitter account link. Take the screenshot below as a sample:

  3. You can just simply apply the [Simplicity] theme for making the feature action. Or you would like to follow the next steps with more customizations. Maybe you would like to have a look at the last tutorial Develop Your Customized Theme for DNN Blog Module before go ahead. There you will know a lot about theme structure and mechanisms. Also you will walk through next steps easily and  quickly.
  4. Open up your SunBlogNuke theme file named DetailView.ascx, which should be placed in $yourwebsite/desktopmodules/sunblog/themes/[YourAppliedTheme] folder (Note that the [YourAppliedTheme] is what theme you had applied in edit blog panel). And look for anywhere you want to insert this author profile, for example,  I like to place it at the bottom of post content so the following line of code is the target:
    <%=Entry.FooterSnippet%>
  5. Past the following VB code just below the above mentioned line. Create a new line if necessary.
        <%  If Not Entry.AuthorProfile Is Nothing AndAlso Not String.IsNullOrEmpty(Entry.AuthorProfile.Bio) Then
             %>
             <div class="authorinfo">
                <toolkit:Gravatar ID="gravatarImg" CssClass="avatar" runat="server" Size="50" 
                             MaxAllowedRating="G" OutputGravatarSiteLink="false" EnableViewState="false"/>
                <h4><a title="Posts by <%=Entry.Author%>" href="#"><%=Entry.Author%></a></h4>
                <%=Entry.AuthorProfile.Bio%>
            </div>
             <%   
            End If
        %>

    Updated C# code for v5.0+ package:

    <%
        if (Entry.AuthorProfile != null && !string.IsNullOrEmpty(Entry.AuthorProfile.Bio))
        {
            %>
            <div class="authorinfo">
                <img src="<%=AvatarUrl(50)%>" alt="<%=Entry.Author%>'s avatar" class="avatar" width="50" height="50" />
                <h4><%=Entry.AuthorLink%></h4>
                <%=Entry.AuthorProfile.Bio%>
            </div>
            <%
        }
    %>
  6. That’s all. Also, you can style the author section a little with CSS. Just add this to your theme’s CSS file named style.css.

If you have any trouble working on it just leave me a comment and let’s figure it out together.