We've received a feature request from our client Tyler. He hoped that we can provide a handy way to deal with the datestamp of their dnn posts, including format and style, for example, he want to be able to pull out the day (27) and convert the month to abbreviated form, e.g., Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec.

I also agree his point and indeed blog calendar date icons, which show the publication date next to each entry, provide a simple way to spice up your blog design. Using just a single image, a bit of CSS and some simple configurations this tutorial will show you how to implement something similar in the Content Slider Widget (& your own themes, which will be supported in next building). Plus we share some resources for you to use. Note that you should apply those customizations with Ultimate DNN Blog Module – SunBlogNuke v3.6.x or later version which had been integrated with DNN Core Token APIs and provides you more extendibility and flexibility. Firstly take a look at the screenshot below:

Customizing your DNN Blog Post with more Awesome Calendar Date Icon

Okey, let us go through the following steps to make it run in your dnn website:

  1. Add the Content Slider Widget module to your target page like landing or home page.
  2. Open Widget settings
  3. Complete some basic options
  4. That is the important step here. You may need to configure template as follows: 
    <div style="clear: both; margin-top: 10px;">
    <div style="float: left; width: 25px; height: 100px; padding-right: 10px; background: url(/Portals/2/images/yellow.gif) no-repeat scroll left top transparent;">
        <div style="color: #FFF; padding: 6px 8px;">[ADDEDDATE|dd]</div>
        <div align="center" style="margin-top: 2px;">[ADDEDDATE|MMM]</div>
    </div>
    <div id="postItem_[POSTID]">
        <h3><a href="[TARGET]" title="Permalink to [TITLE]">[TITLE]</a></h3>
        <div>[EXCERPTTEXT]</div>
        <div align="right"><a href="[TARGET]">read more</a></div>
    </div>
</div>
  5. Click "Update"

Note that those codes are just a sample and you must upload the image yellow.gif into your postal folder. Actually you can customize it with any code, like separating these inline styles into your skin style file. Even you can do lots of things basing on this sample. You may notice the date formatting enhancement, where you can specific any .net supported format like the link mentioned. :) I think your code will be more awesome and our module can provide the capabilities.

Well done, that is all. Congratulations, your widget will work like a charm. Please visit the 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.

BTW, you can find out cooler calendar icon there.