Hacking blogger template to create stand-alone archive page.

After knowing about the Blogger's "standalone page" feature I wanted to add archive page for my blog. To start with I explored blogger gadgets, there is no way for adding the gadget to display only in one page and hide it in rest of the pages without editing the blogger template (I wish blogger will add this feature soon). Later I explored all the hacks on the internet but none seem to give the results what I wanted. After some trail and error I devised a method to add the archive page. I tried this hack and added an archive page for this blog and my photo-blog.
At a very high-level my approach is
- Add default blogger archive gadget.
- Edit the blogger template to hide the gadget using CSS.
- Create a page with javascript to parse the hidden archive gadget DOM and display the data in the required format.

More detailed steps below.

•  Log in to your blogger account select Design link of the blog which you want to modify
• Select Page Elements tab and click on Add a Gadget and select blogger-archive gadget
• Now configure the blog-archive gadget with below options
  - style: choose Hierarchy
  - Options: check Show Post Titles  
  - Archive Frequency: choose monthly
• After adding the archive gadget navigate to Edit HTML tab and take backup of your template by clicking Download Full Template. This backup will help you if you want to revert to old template.
• Click on Expand Full Template and  add the following CSS snippet in the tab section of the template and the save it.

#BlogArchive1 {  display:none; }

• Navigate to Posting -> Edit Pages -> NewPage in the page editor switch to Edit HTML modeand copy the following javascript and publish the page.

<div id="myArch" style="float: left;"> <script type="text/javascript"> var archContent = document.getElementById("ArchiveList").innerHTML; var linkIdx=archContent.indexOf('post-count-link'); var pCL= archContent.slice(linkIdx); var year; var yrOrMon; do{ yrOrMon = /post-count-link.*?>(.*?)<\/a>/i.exec(pCL); // '; if (isNaN(yrOrMon[1])){ var sIndx = pCL.search(/<ul class="?posts"?>/i); var eIndx = pCL.indexOf('<\/ul>',sIndx); document.write('<b>'+yrOrMon[1]+' '+year+'<\/b><br \/>'); document.write(pCL.slice(sIndx, eIndx)+'<\/ul>'); }else{ year = yrOrMon[1]; } linkIdx=pCL.indexOf('post-count-link', 15); pCL= pCL.slice(linkIdx); } while( linkIdx > 0); </script></div>

 You may need to change the script if you want to change the format or look and feel of the archive page.

Advertisements:
Beginning Google Blogger ,Google Blogger For Dummies (For Dummies (Computer/Tech)),Blogger: Beyond the Basics: Customize and promote your blog with original templates, analytics, advertising, and SEO (From Technologies to Solutions),