Technical requirements:

What is the Silverlight Streaming Service?

1. SilverlightStreamingServiceApplicationUrl (Text Field: Multiple Lines of Text, Plain Text)
2. PostImageCaption (Text Field: Muliple Lines of Text, Rich Text)
3. PostImageUrl (Text Field: Single Line of Text, Plain Text)

Modifications to blog pages:

We modified the default.aspx and post.aspx pages to use a customized version of each XSLT that both reformats the layout and incorporates an iframe to display the user-provided SilverlightStreamingApplicationUrl since the default SharePoint editing controls strip out any iframe, embed, or script references. To accomplish this we first saved back-up versions of our default.aspx and post.aspx pages and then opened each in SharePoint Designer in design mode and converted the appropriate dataview Web Parts to XSLT (right click, convert to XSLT option).

Source XSLT and CSS files:

1. Upload the provided default.xsl to the blog's root folder.
2. Convert the post dataview web-part to XSLT (right-click-convert to XSLT).
3. Apply the custom XSLT file provided: from the dataview web-part's Common Data View Properties pane choose DataView Properties, then select the XSLT Source tab and browse to the default.xsl file.

1. Upload the provided post.xsl to the blog's root folder.
2. Convert the post dataview web-part to XSLT (ignore @Author error message).
3. Apply the custom XSLT: from the dataview web-part's Common Data View Properties pane choose DataView Properties, then select the XSLT Source tab and browse to the post.xsl file.
4. Create a filter and parameter to filter the post DVWP by id : from the dataview web-part's Common Data View Properties pane choose Filter, if not displayed create a new URL parameter for ID and set the value to [id].

• Investigate how to add YouTube and MSN videos into the posts.
• Simplify deployment for new blogs via site template (.stp file).
• Create custom site definition with custom columns included.
• Create SharePoint application page to allow users to upload videos/display in blog post in one step. 
• Investigate using Silverlight Streaming Services API and existing solutions to provide reporting on #downloads, video streaming data, etc.

One of the most under-utilized web parts by designers inside SharePoint has to be the content editor web part.  The reason why it's so powerful is because it allows us to embed any markup we want right in the page. We will utilize this web part as well as adding some markup with SharePoint Designer to add some functionality to our SharePoint site.

(It includes some example information for conference participants.)

<div id="topsidebar">
<ul class="ui-tabs-nav">
<li class="ui-tabs-selected"><a href="#fragment-1"><span>Hotel</span></a></li>
<li class=""><a href="#fragment-2"><span>Contact</span></a></li>
</ul>
<div id="fragment-1" class="ui-tabs-panel ui-tabs-hide">
<p>Here are details corresponding to the hotel attendees will be staying at:</p>
<p><a href=http://example.com/>Example Hotel</a><br /> One Microsoft Way, Redmond, WA 98052<br /> Tel: 1.555.555.5555 Fax: 1-555-555-5556</p>
</div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<p>Contact the following for details about the conference:</p> <p>Chris Poteet<br /> <a href=mailto:chris.poteet@example.com>Chris Poteet's E-mail</a><br />555.555.5555</p>
</div>
</div>

When you're done, click OK to exit the Tool Pane, and if you're using WSS then click Exit Edit Mode on the page. If you're using a MOSS publishing page then click the Publish button.

Downloading the jQuery Goodness

Then we need to add both the jQuery framework and jQuery UI which is a framework built on top of jQuery for accomplishing common DHTML functionality.  I have included a ZIP file for you with the necessary JavaScript files. I suggest unzipping this file to the desktop.

Once you have downloaded the files we need to put them on our site. Open your site in SharePoint Designer and expand the _catalogs -> masterpage folder. Drag both JavaScript files into the masterpage folder. Then you may have to check in both as major versions by right-clicking on the files and Check In. (You might also be prompted for content approval which will take you to the master page library to approve the documents.)

Adding References in Our Master Page

Now we need to add references to our JavaScript files as well as instantiate our tabs. Then you will need to add the following to reference the two libraries in the <head> section of your master page.

<script type="text/javascript" src="/_catalogs/masterpage/jquery.js"></script>
<script type="text/javascript" src="/_catalogs/masterpage/jquery-ui.js"></script>

Then we use the following to instantiate our tabs. The document.ready() function allows jQuery to run after the DOM has rendered, and the next line turns on the tabs for the unordered list right beneath the topsidebar div. I decided to use a nice toggle to switch between tabs. This goes inside the <head> after the references we added above.

<script type="text/javascript">
 jQuery(document).ready(function() {
  jQuery("#topsidebar > ul").tabs({
      fx: {
          opacity: "toggle"
      }
  });
 });
 </script>

Adding the CSS

Since DHTML is truly the alteration of the DOM through mostly CSS changes we need to use CSS to hide/show elements in the tabs. Check out your custom CSS file, and then add the following. (If you don't have a custom CSS file reference this post by Microsoft on how to do so.)

/* Conference Welcome Page */

.ui-tabs-hide {
 display: none;
}
ul.ui-tabs-nav {
 margin: 0;
 padding: 8px 0 0 0;
}
ul.ui-tabs-nav li {
 list-style: none;
 margin: 0;
 display: inline;
 font-size: 12px;
}
ul.ui-tabs-nav li a {
 padding: 5px;
 margin-right: 3px;
 border-bottom: none;
 text-decoration: none;
 color: #000000;
 text-transform:uppercase;
}
ul.ui-tabs-nav li a:hover {
 color: #000;
 background: #F1EEE7;
 text-decoration: none;
}
.ui-tabs-selected a {
 background-color: #F1EEE7!important; 
}
ul.ui-tabs-nav li.ui-tabs-unselect a {
 background-color: #F1EEE7;
}
ul.ui-tabs-nav li.ui-tabs-unselect a:hover {
 color: #333;
 background-color: #F1EEE7;
}
.ui-tabs-panel {
 background-color: #F1EEE7;
 padding: 5px;
 line-height: 18px;
}
.ui-tabs-panel ul {
 margin-left: 0;
}
.ui-tabs-panel ul li  {
 background-color: #F1EEE7;
 border-bottom: 1px solid #fff; 
 padding: 5px 0 6px 20px;
}

You're Done!

You've now added some slick tabs to your SharePoint site. There are a multitude of options inside the jQuery UI tabs documentation. Also be sure to change the CSS to match whatever color scheme your SharePoint site uses.

Chris Poteet is a SharePoint consultant for Mixon Consulting with a focus on business analysis, and enterprise information architecture. He also has been involved in user experience and interface designs for over a decade. You can also follow him at his blog at www.siolon.com.