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 + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄
<b:else/>
►
</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>&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")
