What we are going to do here is create a little sidebar widget that displays the most recent post in three categories, one at a time in a slideshow.
Go to Appearance > Design Settings and add a new sidebar; for its Title use “Blog Slider Sidebar” and for its Alias use “blog-slider-sidebar”.
[slideshow alias="blog-slider-slideshow"] and click Save to save the widget.
Go to Appearance > Design Settings and add a new slideshow.
- Title of slide show: Blog Slider Slideshow
- ID (unique identifier): blog-slider-slideshow
- Width: 208
- Height: 230
- Timing: 10
- Transition: turnDown
- Pause on hover: Yes
- Columns: 1
Click Save Slide Show to save these settings, then back in Design Settings click on the Blog Slider Slideshow name to get back to the settings page so we can add some slides.
Click Add new Slide to add our first slide. The only setting that needs changing from the default is the Slide format option which we need to set to Content only (custom).
In the Slide content area use the following shortcode for our content.
[blog category="11" images="true" image_width="198" image_height="50" post_content="excerpt" excerpt_length="50" comments_link="false" show_category_list="false" show_tag_list="false" posts_per_page="1" paging="false" read_more="read more"]
Note that I have used a category ID number of 11, but your categories will have different numbers so you must go and find out what your category IDs are and specify an appropriate ID in your shortcode.
To find out what the ID of a category is, go to Posts > Categories, hover the mouse pointer over the category name and look in the status bar; you will see a parameter that begins tag_ID= and the number after the equals sign is the category ID.
Click Save Slide and then add two more slides each using the Content only (custom) option for the Slide format and for the content use the same shortcode as before, only change the category ID number to the ID of a different category. Don’t forget to click Save Slide each time.
Lastly we need to add some polish to our blog slider by tweaking a few styles. So let’s go to Appearance > Design Settings > Edit All Default Design Settings and add the following styles to our Custom CSS box:
.blog-slider-sidebar .contentSlide .inner { padding: 0 !important; }
.blog-slider-sidebar div.the-post-container {margin-left: 0 !important; }
.blog-slider-sidebar .post-header-info { font-size: 9px !important; font-weight: normal !important; padding-top: 3px !important; border-bottom:1px dotted #ccc; }
.blog-slider-sidebar h2 { font-size: 12px !important; }
.blog-slider-sidebar .header { margin-bottom: 10px !important; }
.blog-slider-sidebar .read-more { display: inline !important; margin-left:5px;}
All that is left to do now is to deploy the sidebar. We can do this either via the layout manager by setting a sidebar page element for a page layout to be our Blog Slider Sidebar, or we can use [sidebar alias="blog-slider-sidebar"] in some content somewhere. Note that our blog slider has been designed to be used in a 1/4 column, if you use it in any other width column it may not look quite right and you may need to tweak the slideshow width and height settings. 
Resources
- Shortcodes: http://para.llel.us/themes/mingle-wp/shortcodes/
- Support forum: http://para.llel.us/support/groups/mingle-wordpress/forum/
