This hack combines two popular archive hacks with a new functionality in the same script. The two popular hacks included are the displaying of archive post counts in the archive list, and the re-ordering of the archive list. These two can be applied using the script with or without the third, new, functionality with is asyncronous loading of archives into the sidebar. If you don’t know what that means, try it out in my sidebar. Select an archive from the drop-down and notice that instead of being taken to the archive page, the posts in that archive are listed for you right in the sidebar. The steps to implement either part of this hack follow:
- Edit your blog template and add the following code directly after the <body> tag:
<ArchivePage>
<!– START ARCHIVE XOXO –>
<ul class=”xoxo posts” style=”display:none;”>
<Blogger><li><a href=”<$BlogItemPermalinkUrl$>”><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></li></Blogger>
</ul>
<!– END ARCHIVE XOXO –>
</ArchivePage>Note: if you have your blog marked up using hAtom or the XOXO Blog Format this step is unnecessary.
- Add the following code into your sidebar where you want the archive list to display:
<div id=”archive_list”><i>Loading Archives…</i></div>
<div id=”archive_display”></div>
<noscript>
<ul class=”archive-list”><BloggerArchives>
<li><a href=”<$BlogArchiveURL$>”><$BlogArchiveName$></a></li>
</BloggerArchives></ul>
</noscript>Note to advanced users. The noscript section is necessary. You can edit it, but only if you pass two additional parameters to the function in the next step containing the code starting the list and ending the list.
- Add the following code into your <head> section:
<script type=”text/javascript” src=”http://jscripts.ning.com/get.php?xn_auth=no&id=1286814;
<script type=”text/javascript”>
//<![CDATA[
addLoadEvent(function(){get_archive_list(‘archive_list’,’archive_display’,’format‘,sort);});
//]]>
</script>Where format is drop if you want a drop-down archive list or list if you want the archives displayed in an unordered list. sort is true to sort the archive list oldest-to-newest and false to sort newest-to-oldest.
If you want the archive list to link to the archive pages instead of loading in the sidebar then delete the archive_display text from the code above.
- Save your template and republish your blog.
Advanced users may be interested in the information on the scripts behind this.
6 Responses
I’m guessing the first bit of code generates the XOXO notation, and the rest of the code just reads it and calls it out?
It looks cool enough, works great too. Maybe if you could output the archive list as flat links seperated by <br />s?
More explanation on how to style it would be cool too! 🙂 Great work!
Yup. Step 1 generates XOXO, the rest of it is for the reading and mashing to your sidebar.
Outputting links separated by <br />s is possible… but realistically you could just use the unordered list version (passing ‘list’) and style the list not to have bullets. You’re right, though, I should give some information on all that styling stuff. Will do in the future 🙂
I was just going through the two ways of calling the two details regarding archives at your Ning page.
I didn’t test the first one, too much effort! 😛 But the second one is not working like its supposed to, I think.
Check this out –> Archive
That is for the link given under archive_posts.php, although the link uses archive_list.php.
using archive_posts.php gives an error! could you check it up?
I have updated the instructions page so that the link properly points to archive_posts.php as you surmised it was meant to. I have also updated the script to give a more descriptive ‘No valid XOXO data found!’ error. If you do not have any hAtom or XOXO Blog Format code on the archive page the script can do nothing.
Hehe! Your type on the title (asynchronous) hid this post from the searches. I thought I must’ve imagined this post! 😛
I wanted to say, its the url meant to be this way?
“http://jscripts.ning.com/get.php?xn_auth=no&id=1286814″
I do regret the typo in my title here, unfortunately changing it now will mess up the permalink URL 😛 sorry about that. Yes, the & is intentionally like that. When the browser sees that it will read it simply as & (according to the rules of XML and thus XHTML). Simply using & in the URL would work, but it breaks both XHTML validity and XML well-formedness and is highly disreccomended.