Images can be downloaded from the original Blogger TicTac Blue template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="$BLOJSOM_BLOG.getBlogLanguage()" lang="$BLOJSOM_BLOG.getBlogLanguage()"> <head> <title>$BLOJSOM_BLOG.getBlogName()</title> <!-- Meta Information --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="MSSmartTagsPreventParsing" content="true"/> <meta name="generator" content="$BLOJSOM_VERSION"/> <link rel="SHORTCUT ICON" href="$BLOJSOM_SITE_URL/favicon.ico" /> <!-- Site Feed Autodiscovery--> <link rel="alternate" type="application/rss+xml" title="RSS" href="$BLOJSOM_BLOG.getBlogURL()?flavor=rss2"/> <!-- Atom API Posting Autodiscovery --> <link rel="service.post" type="application/atom+xml" title="$BLOJSOM_BLOG.getBlogName()" href="$BLOJSOM_BLOG.getBlogBaseURL()/atomapi/$BLOJSOM_USER"/> <!-- Blogger API Autodiscovery --> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="$BLOJSOM_BLOG.getBlogURL()?flavor=rsd"/> <script type="text/javascript" src="$BLOJSOM_SITE_URL/commentPreview.js"></script> <style type="text/css"> /* Blogger Template Style Name: TicTac (Blueberry) Author: Dan Cederholm URL: www.simplebits.com Date: 1 March 2004 */ /* ---( page defaults )--- */ body { margin: 0; padding: 0; font-family: Verdana, sans-serif; font-size: small; text-align: center; color: #333; background: #e0e0e0; } blockquote { margin: 0 0 0 30px; padding: 10px 0 0 20px; font-size: 88%; line-height: 1.5em; color: #666; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/quotes.gif) no-repeat top left; } blockquote p { margin-top: 0; } abbr, acronymn { cursor: help; font-style: normal; border-bottom: 1px dotted; } code { color: #996666; } hr { display: none; } img { border: none; } /* unordered list style */ ul { list-style: none; margin: 0 0 20px 30px; padding: 0; } li { list-style: none; padding-left: 14px; margin-bottom: 3px; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/tictac_blue.gif) no-repeat 0 6px; } /* links */ a:link { color: #6699cc; } a:visited { color: #666699; } a:hover { color: #5B739C; } a:active { color: #5B739C; text-decoration: none; } /* ---( layout structure )---*/ #wrap { width: 847px; margin: 0 auto; text-align: left; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/tile.gif) repeat-y; } #content { margin-left: 62px; /* to avoid the BMH */ } #main-content { float: left; width: 460px; margin: 20px 0 0 0; padding: 0; line-height: 1.5em; } #sidebar { margin: 0 41px 0 547px; padding: 20px 0 0 0; font-size: 85%; line-height: 1.4em; color: #999; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/sidebar_bg.gif) no-repeat 0 0; } /* ---( header and site name )--- */ #blog-header { margin: 0; padding: 0; font-family: "Lucida Grande", "Trebuchet MS"; background: #e0e0e0 url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/top_div_blue.gif) no-repeat top left; } #blog-header h1 { margin: 0; padding: 45px 60px 50px 160px; font-size: 200%; color: #fff; text-shadow: #4F73B6 2px 2px 2px; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/top_h1_blue.gif) no-repeat bottom left; } #blog-header h1 a { text-decoration: none; color: #fff; } #blog-header h1 a:hover { color: #eee; } /* ---( main column )--- */ h2.date-header { margin-top: 0; padding-left: 14px; font-size: 90%; color: #999999; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/date_icon_blue.gif) no-repeat 0 50%; } h3.post-title { margin-top: 0; font-family: "Lucida Grande", "Trebuchet MS"; font-size: 130%; letter-spacing: -1px; color: #993333; } .post { margin: 0 0 1.5em 0; padding: 0 0 1.5em 14px; border-bottom: 1px solid #ddd; } .post-footer { margin: 0; padding: 0 0 0 14px; font-size: 88%; color: #999; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/tictac_grey.gif) no-repeat 0 8px; } /* .post img { padding: 6px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; } */ /* comment styles */ #comments { padding-top: 10px; font-size: 85%; line-height: 1.5em; color: #666; background: #eee url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/comments_curve.gif) no-repeat top left; } #comments h4 { margin: 20px 0 15px 0; padding: 8px 0 0 40px; font-family: "Lucida Grande", "Trebuchet MS"; font-size: 130%; color: #666; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/bubbles.gif) no-repeat 10px 0; height: 29px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ } #comments ul { margin-left: 0; } #comments li { background: none; padding-left: 0; } .comment-body { padding: 0 10px 0 25px; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/tictac_blue.gif) no-repeat 10px 5px; } .comment-body p { margin-bottom: 0; } .comment-data { margin: 4px 0 0 0; padding: 0 10px 1em 60px; color: #999; border-bottom: 1px solid #ddd; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/comment_arrow_blue.gif) no-repeat 44px 2px; } .deleted-comment { font-style:italic; color:gray; } /* ---( sidebar )--- */ h2.sidebar-title { margin: 0 0 0 0; padding: 25px 0 0 50px; font-family: "Lucida Grande", "Trebuchet MS"; font-size: 130%; color: #666; height: 32px; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/sidebar_icon.gif) no-repeat 20px 15px; height: 32px !important; /* for most browsers */ height /**/:57px; /* for IE5/Win */ } #sidebar ul, #sidebar p { margin: 0; padding: 5px 20px 1em 20px; border-bottom: 1px solid #ddd; } #sidebar li { background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/tictac_blue.gif) no-repeat 0 5px; } /* profile block */ .profile-datablock { margin: 0; padding: 5px 20px 0 20px; } .profile-datablock dd { margin: 0; padding: 0; } .profile-img img { float: left; margin: 0 10px 0 0; padding: 4px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; background: #fff; } #sidebar p.profile-link { padding-left: 36px; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/profile_blue.gif) no-repeat 20px 4px; } p#powered-by, #sidebar p.profile-textblock { margin-top: 1em; border: none; } /* ---( footer )--- */ .clear { /* to fix IE6 padding-top issue */ clear: both; height: 0; } #footer { margin: 0; padding: 0 0 9px 0; font-size: 85%; color: #ddd; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/bottom_sill.gif) no-repeat bottom left; } #footer p { margin: 0; padding: 20px 320px 20px 95px; background: url($BLOJSOM_BLOG.getBlogBaseURL()/resources/$BLOJSOM_USER/bottom_sash.gif) no-repeat top left; } </style> </head> #macro(friendlyPermalink $entry) #set ($categoryForEntry = $entry.getBlogCategory().getCategory()) #if ($categoryForEntry == "/") #set($categoryForEntry = "") #end #set ($entryLink = "$BLOJSOM_BLOG.getBlogURL()$categoryForEntry$entry.getDateAsFormat('yyyy')/$entry.getDateAsFormat('MM')/$entry.getDateAsFormat('dd')/$entry.getPermalink()") #end <body> <div id="wrap"> <!-- #wrap - for centering --> <!-- Blog Header --> <div id="blog-header"> <h1><a href="$BLOJSOM_BLOG.getBlogURL()">$BLOJSOM_BLOG.getBlogName()</a><br/>$BLOJSOM_BLOG.getBlogDescription()</h1> </div> <div id="content"> <!-- #content wrapper --> <!-- Begin #main-content --> <div id="main-content"> #if ($BLOJSOM_PERMALINK) <h3 class="post-title"> #if ($BLOJSOM_PERMALINK_PREVIOUS_ENTRY) #friendlyPermalink($BLOJSOM_PERMALINK_PREVIOUS_ENTRY) <a href="$entryLink">$!BLOJSOM_PERMALINK_PREVIOUS_ENTRY.getTitle()</a> | #end <a href="$BLOJSOM_BLOG.getBlogURL()">Main</a> #if ($BLOJSOM_PERMALINK_NEXT_ENTRY) | #friendlyPermalink($BLOJSOM_PERMALINK_NEXT_ENTRY) <a href="$entryLink">$!BLOJSOM_PERMALINK_NEXT_ENTRY.getTitle()</a>#end </h3> #end #set ($hasPrintedDateHeader = 0) #set ($currentDateFormat = "") #foreach ($entry in $BLOJSOM_ENTRIES) #if (!$currentDateFormat.equals($entry.getDateAsFormat("Mdyyyy"))) #set ($hasPrintedDateHeader = 0) #end #if ($hasPrintedDateHeader == 0) #set ($currentDateFormat = $entry.getDateAsFormat("Mdyyyy")) <h2 class="date-header">$entry.getDateAsFormat("EEEE, MMMM dd")</h2> #set ($hasPrintedDateHeader = 1) #end <!-- Begin .post --> <div class="post"> <a name="$entry.getId()"></a> <h3 class="post-title">$entry.getTitle()</h3> <div class="post-body"> $entry.getDescription() </div> #if (!$BLOJSOM_PERMALINK) #friendlyPermalink($entry) <p class="post-footer">posted by $!entry.getMetaData().get("blog-entry-author") at <br /> <a href="$entryLink" title="permanent link">$entry.getDateAsFormat("h:mm a")</a> ($!entry.getMetaData().get("blojsom-plugin-days-since-posted") day(s) old) #if ($entry.supportsComments() && !$entry.getMetaData().containsKey("blog-entry-comments-disabled"))| <a href="$entryLink#comments">$entry.getNumComments() comments</a> #end #if ($entry.supportsComments() && !$entry.getMetaData().containsKey("blog-entry-trackbacks-disabled"))| <a href="$entryLink#trackbacks">$entry.getNumTrackbacks() trackbacks</a> #end </p> #else <!-- Begin Trackback Auto Discovery --> #set( $blogDescription = $entry.getEscapedDescription() ) #if ($blogDescription.length() > 255) #set( $ellipses = "..." ) #set( $blogDescription = "$blogDescription.substring(0,252)$ellipses" ) #end <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"> <rdf:Description rdf:about="$entryLink" dc:identifier="$entryLink" dc:title="$entry.getTitle()" dc:subject="$BLOJSOM_REQUESTED_CATEGORY.getCategoryURL()" dc:description="$blogDescription" dc:creator="$BLOJSOM_BLOG.getBlogOwner()" dc:date="$entry.getISO8601Date()" trackback:ping="$entryLink?tb=y" /> </rdf:RDF> --> <!-- End Trackback Auto Discovery --> #if ($entry.supportsComments() && !$entry.getMetaData().containsKey("blog-entry-trackbacks-disabled")) <a href="$entryLink?tb=y">Trackback</a> #end <p class="post-footer"> <p class="post-footer"> <a name="comments"></a> #foreach ($entryComment in $entry.getComments()) Comment by: #if ($entryComment.getAuthorEmail() && $entryComment.getAuthorEmail().length() > 0) <a href="mailto:$BLOJSOM_PLUGIN_SIMPLE_OBFUSCATION.obfuscate($entryComment.getAuthorEmail())">$entryComment.getAuthor()</a> #else $entryComment.getAuthor() #end - <a href="$entryComment.getAuthorURL()">$entryComment.getAuthorURL()</a><br /> Left on: $entryComment.getCommentDate()<br /> $entryComment.getComment()<br /> #end </p> <p class="post-footer"> <a name="trackbacks"></a> #foreach ($entryTrackback in $entry.getTrackbacks()) Trackback from: <a href="$entryTrackback.getUrl()">#if ($entryTrackback.getBlogName())$entryTrackback.getBlogName()#else$entryTrackback.getUrl()#end</a><br /> Left on: $entryTrackback.getTrackbackDate()<br /> Title: #if ($entryTrackback.getTitle()) $entryTrackback.getTitle() #end<br /> #if ($entryTrackback.getExcerpt()) $entryTrackback.getExcerpt() #end<br /> #end </p> #if ($entry.supportsComments() && !$entry.getMetaData().containsKey("blog-entry-comments-disabled")) <table> <form name="commentform" method="post" action="."> <input type="hidden" name="comment" value="y"/> <input type="hidden" name="category" value="$entry.getCategory()"/> <input type="hidden" name="permalink" value="$entry.getPermalink()"/> <tr> <td>Author (<font color="red">*</font>):</td><td><input type="text" name="author" value="#if ($BLOJSOM_COMMENT_PLUGIN_AUTHOR)$BLOJSOM_COMMENT_PLUGIN_AUTHOR#end"/></td> </tr> <tr> <td>E-mail:</td><td><input type="text" name="authorEmail" value="#if ($BLOJSOM_COMMENT_PLUGIN_AUTHOR_EMAIL)$BLOJSOM_COMMENT_PLUGIN_AUTHOR_EMAIL#end"/></td> </tr> <tr> <td>URL: </td><td><input type="text" name="authorURL" value="#if ($BLOJSOM_COMMENT_PLUGIN_AUTHOR_URL)$BLOJSOM_COMMENT_PLUGIN_AUTHOR_URL#end"/></td> </tr> <tr> <td>Comment (<font color="red">*</font>):</td><td><textarea name="commentText" id="commentText" value="" rows="7" cols="40" onkeyup="reloadPreviewDiv();"></textarea></td> </tr> <p /> <tr> <td>Remember me?</td> <td><input type="checkbox" name="remember" #if ($BLOJSOM_COMMENT_PLUGIN_REMEMBER_ME)CHECKED#end/></td> </tr> <tr> <td colspan="2"><input type="submit" name="submit" value="Submit Comment"/> <input type="reset" name="reset" value="Reset"/> </td> </tr> <tr> <td colspan="2"><h3>Live Preview</h3></td> </tr> <tr> <td colspan="2"> <div id="commentpreview"> </div> </td> </tr> </form> </table> #end </p> #end </div> <!-- End .post --> #end <hr/> </div><!-- End #main-content --> </div><!-- End #content --> <!-- Begin #sidebar --> <div id="sidebar"> <h2 class="sidebar-title">About</h2> <ul class="archive-list"> e-mail: <a href="mailto:$BLOJSOM_PLUGIN_SIMPLE_OBFUSCATION.obfuscate("owner @ blog.com")">BLOG OWNER</a> </ul> <h2 class="sidebar-title">Archives</h2> <ul class="archive-list"> <div class="calendarbox"> <table class="calendartable"> <tr> <td colspan="7" class="calendarcaption"> <b>$BLOJSOM_CALENDAR.getCaption()</b> </td> </tr> <!-- DOW Name Row --> <tr> #foreach( $downame in $BLOJSOM_CALENDAR.getShortDayOfWeekNames()) #if($downame) <td width="19" class="calendarcolumn">$downame </td> #end #end </tr> ## Dear Velocity Authors, give us a real for loop!!!!!! <tr> $BLOJSOM_CALENDAR_VTLHELPER.getCalendarRow(1,"calendarcolumn") </tr> <tr> $BLOJSOM_CALENDAR_VTLHELPER.getCalendarRow(2,"calendarcolumn") </tr> <tr> $BLOJSOM_CALENDAR_VTLHELPER.getCalendarRow(3,"calendarcolumn") </tr> <tr> $BLOJSOM_CALENDAR_VTLHELPER.getCalendarRow(4,"calendarcolumn") </tr> <tr> $BLOJSOM_CALENDAR_VTLHELPER.getCalendarRow(5,"calendarcolumn") </tr> <tr> $BLOJSOM_CALENDAR_VTLHELPER.getCalendarRow(6,"calendarcolumn") </tr> <tr> <td colspan="7" class="calendarcolumn">$BLOJSOM_CALENDAR_VTLHELPER.getPreviousMonth() $BLOJSOM_CALENDAR_VTLHELPER.getToday() $BLOJSOM_CALENDAR_VTLHELPER.getNextMonth()</td> </tr> </table> </div> </ul> <h2 class="sidebar-title">Categories</h2> <ul class="archive-list"> #foreach ($blogCategory in $BLOJSOM_ALL_CATEGORIES) [<a href="$blogCategory.getCategoryURL()"> #if ($blogCategory.getName()) $blogCategory.getName() #else $blogCategory.getCategory() #end</a>] ##<a href="$blogCategory.getCategoryURL()?flavor=atom">Atom</a> ##<a href="$blogCategory.getCategoryURL()?flavor=rss2">RSS</a> <br /> #end <br /> Syndication: <a href="$BLOJSOM_BLOG.getBlogURL()?flavor=atom">Atom</a> | <a href="$BLOJSOM_BLOG.getBlogURL()?flavor=rss2">RSS</a> </ul> #if (!$BLOJSOM_PERMALINK) <h2 class="sidebar-title">Recently</h2> <ul id="recently"> #foreach ($entry in $BLOJSOM_ENTRIES) #friendlyPermalink($entry) <li> <a href="$entryLink">$entry.getTitle()</a> </li> #end </ul> #end <h2 class="sidebar-title">About this site</h2> <p> The views expressed here are those of myself, and not my employer. </p> <!-- <p>This is a paragraph of text in the sidebar.</p> --> <p id="powered-by"> <a href="http://blojsom.sf.net"> <img src="$BLOJSOM_BLOG.getBlogBaseURL()/powered-by-blojsom.gif" alt="Powered by blojsom"/> </a> </p> </div> <!-- End #sidebar --> <div class="clear"> </div> <div id="footer"> <p><!-- If you'd like, you could place footer information here. --> </p> </div> </div> <!-- end #wrap --> <!-- c(~) --> </body> </html>