Blog Archive Carousel Widget

I've played around with blogspots' widget system and came up with a nice blog archive carousel widget. The widget is based on the standard blogger.com blog archive widget and jcarousel, a jquery plugin.
DISCLAIMER: Use at your own discretion.
How to use:

• Go to your blog's Template -> Edit HTML.


• Download Full Template for backup and save it somewhere you'll remember.


• Go go Template -> Page elements and add a blog archive widget, save the page.


• Go back to Template -> Edit HTML.


• Make sure Expand Widget Templates is not checked.


• Just below the <data:blog.pagetitle/> add the code below
  

  
   <!-- archive carousel -->
   <script src='http://javajavaproxy.googlepages.com/jquery-1.2.1.min.js'/>
   <script src='http://javajavaproxy.googlepages.com/jquery.jcarousel.pack.js'/>
   <script type='text/javascript'>
   jQuery(document).ready(function() {
       jQuery('#mycarousel').jcarousel({  vertical: true,  scroll: 3}); });
   </script>
   <!-- //archive carousel -->
  



• At the end of the <skin> section, just above the ]]></b:skin>add the code below
  

  
  /* new archive */
  UL.posts LI {  font-size:80%;  width:170px;  padding-right:2px;  border-bottom:1px solid silver;}
  .jcarousel-container { position: relative; }
  .jcarousel-clip { z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative; }
  .jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0; }
  .jcarousel-item { float: left; list-style: none; width: 170px; xheight: 18px; }
  .jcarousel-next { z-index: 3; display: none; }
  .jcarousel-prev { z-index: 3; display: none; }
  .jcarousel-skin-tango.jcarousel-container { -moz-border-radius: 10px; background: #F0F6F9; border: 1px solid #346F97; }
  .jcarousel-skin-tango.jcarousel-container-vertical { width: 170px; height: 170px; padding: 40px 20px; }
  .jcarousel-skin-tango .jcarousel-clip-vertical { width:  190px; height: 170px; }
  .jcarousel-skin-tango .jcarousel-item { width: 170px; xheight: 18px; }
  .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: 10px; }
  .jcarousel-skin-tango .jcarousel-item-placeholder { background: #fff; color: #000; }
  .jcarousel-skin-tango .jcarousel-next-vertical { position: absolute; bottom: 5px; left: 99px; width: 32px; height: 32px; cursor: pointer; background: transparent url(http://javajavaproxy.googlepages.com/next-vertical.png) no-repeat 0 0; }
  .jcarousel-skin-tango .jcarousel-next-vertical:hover { background-position: 0 -32px; }
  .jcarousel-skin-tango .jcarousel-next-vertical:active { background-position: 0 -64px; }
  .jcarousel-skin-tango .jcarousel-next-disabled-vertical,
  .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
  .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active { cursor: default; background-position: 0 -96px; }
  .jcarousel-skin-tango .jcarousel-prev-vertical { position: absolute; top: 5px; left: 99px; width: 32px; height: 32px; cursor: pointer; background: transparent url(http://javajavaproxy.googlepages.com/prev-vertical.png) no-repeat 0 0; }
  .jcarousel-skin-tango .jcarousel-prev-vertical:hover { background-position: 0 -32px; }
  .jcarousel-skin-tango .jcarousel-prev-vertical:active { background-position: 0 -64px; }
  .jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
  .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
  .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active { cursor: default; background-position: 0 -96px; }
  



• find the
  <b:widget id="'BlogArchive1'" locked="'false'" title="'Blog" type="'BlogArchive'/">
  and replace this line with the following code
  

  
  <b:widget id='BlogArchiveCarousel' locked='false' title='Blog Archive' type='BlogArchive'>
  <b:includable id='toggle' var='interval'>
    <b:if cond='data:interval.toggleId'>
    <b:if cond='data:interval.expclass == "expanded"'>
      <a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" +       "&amp;dir=close&amp;toggle=" + data:interval.toggleId +       "&amp;toggleopen=" + data:toggleopen'>
          <span class='zippy toggle-open'>&#9660; </span>
      </a>
    <b:else/>
      <a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" +         "&amp;dir=open&amp;toggle=" + data:interval.toggleId +         "&amp;toggleopen=" + data:toggleopen'>
            <span class='zippy'>
              <b:if cond='data:blog.languageDirection == "rtl"'>
                &#9668;
              <b:else/>
                &#9658;
              </b:if>
            </span>
      </a>
    </b:if>
   </b:if>
  </b:includable>
  <b:includable id='interval' var='intervalData'>
      <b:loop values='data:intervalData' var='i'>
       <b:if cond='data:i.data'>
         <b:include data='i.data' name='interval'/>
       </b:if>
       <b:if cond='data:i.posts'>
         <b:include data='i.posts' name='posts'/>
       </b:if>
      </b:loop>
   </b:includable>
  <b:includable id='menu' var='data'>
    <select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
      <option value=''><data:title/></option>
      <b:loop values='data:data' var='i'>
        <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
      </b:loop>
    </select>
  </b:includable>
  <b:includable id='flat' var='data'>
    <ul>
      <b:loop values='data:data' var='i'>
        <li class='archivedate'>
          <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
        </li>
      </b:loop>
    </ul>
  </b:includable>
  <b:includable id='posts' var='posts'>
       <b:loop values='data:posts' var='i'>
         <li>&amp;nbsp;<a expr:href='data:i.url'><data:i.title/></a></li>
       </b:loop>
   </b:includable>
  <b:includable id='main'>
      <b:if cond='data:title'>
        <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
      <div id='ArchiveList'>
       <div expr:id='data:widget.instanceId + "_ArchiveList"'>
         <ul class='jcarousel-skin-tango posts' id='mycarousel'>
            <b:include data='data' name='interval'/>
         </ul>
       </div>
      </div>
      <b:include name='quickedit'/>
      </div>
   </b:includable>
  </b:widget>
  



• Preview the template


• If all looks well, you can save your template. You might get prompted to confirm that BlogArchive1 will be deleted. Allow it (we changed it's name to "BlogArchiveCarousel")