KELVIN SMITH LIBRARY

Blog Branding: Sidebar Content

Sidebars can exist on both sides of the branded template. My Index template places my links block on the right along with some other stuff I've custom coded into it. Where you place specific content in each of your templates is up to you but the process for creating each block of content is the same. For this post I will be discussing two specific pieces of your existing Index template that are re-used all over your Blog@Case site.

You will be creating/updating two more items on your Templates page. One for your Links, the other for your Main Menu. My 'Main Menu' is done as a module but, my 'Links' block was done in the 'Index Templates' area. It makes more sense to me for both of these to be done as modules but they will work as either.

Main Menu Module

Code for the 'Main Menu' module that may already exist in your blog. Note: This sample code may auto-wrap around the left sidebar of this page. It appears much longer than it really is.

<div id="snav">
<table cellspacing="4" cellpadding="0" 
summary="Monthly calendar with links to each day's posts" 
style="border: solid black 2px">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr><th abbr="Sunday" align="center"><span class="calendar">Sun</span></th>
<th abbr="Monday" align="center"><span class="calendar">Mon</span></th>
<th abbr="Tuesday" align="center"><span class="calendar">Tue</span></th>
<th abbr="Wednesday" align="center"><span class="calendar">Wed</span></th>
<th abbr="Thursday" align="center"><span class="calendar">Thu</span></th>
<th abbr="Friday" align="center"><span class="calendar">Fri</span><
<th abbr="Saturday" align="center"><span class="calendar">Sat</span></th>
</tr>

<MTCalendar>

<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>

<td align="center"><span class="calendar">

<MTCalendarIfEntries><MTEntries lastn="1">

  <a href="<$MTEntryPermalink$>"><$MTCalendarDay$></a>

</MTEntries></MTCalendarIfEntries>

<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>

<MTCalendarIfBlank> </MTCalendarIfBlank></span></td>

<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>

</MTCalendar>

</table>

<div class="dashedseparator"></div>

<div style="text-align: center;">

<a href="<$MTBlogURL$>rss20.xml"/><img 

rc="<$MTBlogURL$>rss.png" 

width="80" height="15" alt="XML RSS Feed" border="0" /></a> 

<a href="<$MTBlogURL$>feed.atom" /><img 

rc="<$MTBlogURL$>atom.png" 

width="80" height="15" alt="XML RSS Feed" border="0" /></a>

</div>

<div class="dashedseparator"></div>

<h3>Recent Entries</h3>

<ul class="navlink">

<MTEntries lastn="7">

<li class="navlink"><a href="<$MTEntryPermalink$>"

  title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>

</MTEntries>

</ul>

<h3>Recent Comments</h3>

<ul class="navlink">

<MTComments lastn="7" sort_order="descend">

<li class="navlink"><$MTCommentAuthorLink$> on 

lt;MTCommentEntry><a href="<$MTEntryPermalink$>"

  title="<$MTEntryTitle$>"><$MTEntryTitle$></a>

  </MTCommentEntry></li>

</MTComments>

</ul>

</div>

<div class="searchbox">

 <div class="boxtitle"><label for="searchtext">SEARCH BLOG.CASE.EDU:</label></div>

 <div class="dashedseparator"></div>

  <form action="http://www.google.com/u/cw" method="get"

  id="searchform" name="searchform">

<input type="hidden" name="hq" value="inurl:blog.case.edu/" />

<input name="q" id="searchtext" type="text" />

<input name="sa" id="searchsubmit" type="submit" value="SEARCH" />

	 </form>

	</div>

This block of code can be used pretty much as-is. From top to bottom it provides the following:

• a current month calendar with links on days on which you have posts
• images linked to the XML and ATOM versions of your RSS feed
  Note: You will need to upload images for this purpose or adjust the links to use images that you know are suitable. This code assumes you have uploaded these images to your Blog@Case root with the names provided.
• 'Recent Entries'
• 'Recent Comments'
• a search box configured to search blog.case.edu

All separated by dashed lines that use the 'dashedseparator' class from the Case stylesheet you uploaded earlier.

Links

This is nothing more than an unordered list just like in the sidebars of your departmental site. My copy extends this file by adding a couple of custom coded pieces that I want to appear with the list but here's the code for it:

<h3>Links</h3>

<ul class="navlink">

<li class="navlink"><a hhref="http://blog.case.edu">Blog@Case</a></li>

<li class="navlink"><a href="http://my.case.edu">MyCase</a></li>

<li class="navlink"><a href="http://www.case.edu/its">ITS Home</a></li>

</ul>

Next Steps

• Footer code
• Pulling it all together with the 'Index' template!