Sunday, December 23, 2007

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")

1 comment:

  1. Algeria
    ــــــــــــــــــــــ
    Nice Man
    i will try
    ــــــــــــــــــــــ
    algeria my love
    and gazza his pulse

    ReplyDelete

[Due to much spam, comments are now moderated and will be posted after review]