Refer to the last tutorial about how to implement a customized calendar date in the Content Slider Widget of Ultimate DNN Blog Module – SunBlogNuke v3.6.x or later version, today we continue to share a more awesome code sample for you and it indeed works well in our home page. As you go ahead do some customizations basing on SunBlogNuke, like the must-have widget module – Content Slider Widget, you will understand what the cool extendibility and flexibility our blogging modules supply for your dnn website. Firstly take a look at the screenshot below:

Code Sample for Content Slider Widget

Like other guideline, let us go through the following steps to make it run in your dnn portal:

  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 [Item Template] as follows: 
    <div id="postItem_[POSTID]" class="post">
    <h3 class="title"><a href="[TARGET]" title="PermaLink for [TITLE]" rel="bookmark">[TITLE]</a></h3>
    <h5 class="byline">[ADDEDDATE|MMM]<br>[ADDEDDATE|dd]</h5>
    <h5 class="tags">Tagged as: [TAG]</h5>
    <h6 class="comments">
       <a href="[TARGET]#comments" title="Comment on [TITLE]">[COMMENTCOUNT]</a>
    </h6>
    <p>[EXCERPTTEXT]</p>
</div>
  5. Click “Update”
  6. Now those posts with related data may exist there but not styled well, let’s attach some magic CSS for making it look more attractive. Copy the following styles into your skin style file, like skin.css, or other similar place: 
    /* Recent Posts Style */
.sliderWidget .post{padding-left:3em;position:relative;border-bottom:1px solid #EEEEEE;margin-bottom:1em;}
.sliderWidget h3.title{font-style:italic;font-weight:normal;margin-right:1.6em;}
.sliderWidget h3.title a:link, .sliderWidget h3.title a:visited{color:#555;text-decoration:none;font-size:1.3em;}
.sliderWidget h3.title a:hover{text-decoration:underline;color:#000;}
.sliderWidget h5.tags{font-weight:normal;}
.sliderWidget h5.byline{color:#777777;left:0;margin:5px;position:absolute;top:0;width:2.5em;text-align:center;}
.sliderWidget h6.comments{background-color:#464646;height:25px;position:absolute;right:0;text-align:center;top:0;width:25px;}
.sliderWidget h6.comments a{color:#FFF;display:block;padding:4px 0;text-decoration:none;}
.sliderWidget h6.comments:hover{background-color:#D44314;}

Well done, that is all. Congratulations, your widget will work like a charm. Enjoy blogging & writing.

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