A Better Archive Page for Blogger

This is for me, the better Archive Page. Let's see the how it looks.

or you can just click my ARCHIVE PAGE in the navigation bar on top.

This has cool feature also:

• Sort by title (ascending or descending) - by clicking the "POST TITLE" table header.
• Sort by date (older first or newer first) -  by clicking the "POST DATE" table header.
• Option to show all post by Label
• When you hover the post title a snippet of the post will display.

Things that it doesn't have, which is acceptable:

• You can't change the date format
• You can't change table header

unless you edit the script.

Here's how to implement it.

1. Create a Page 

         For New Blogger Interface: Dashboard > Pages > New Page > Blank Page

         Put a title, of course, like "Archive". :D

2. HTML Tab > Paste the code below

<div id="bp_toc">
Loading TOC. Please wait....</div>
<script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript">
</script><br />
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript">
</script><br />
<br />
<style>
#bp_toc {
  border: 0px solid #000000;
  padding: 5px;
  width:100%;
  margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #fff;
  color: #000000;
  padding-left: 5px;
  width:60%;
}
.toc-header-col2 {
  width:20%;
}
.toc-header-col3 {
  width:20%;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
  font-size:14px;
  text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
  font-size:14px;
  text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  font-size:14px;
}
</style>

3. Preview it, if it's ok then Publish.

You can customize the appearance by touching the CSS selectors from <style>....</style>
You can also style your static page.

<!-- Static page styling Start-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.blog-pager, #footer-wrapper, #footer-wrapper2, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}
</style>
</b:if>
<!-- Static page styling End -->

The RED CODE are the widget that you want to hide when viewing your page.

That's all folks!


UPDATE Jan  3, 2013

• To remove the tooltip/short snippet of the posts when you hover the title, use this script.

http://mattmorzcodes.googlecode.com/files/archivenullhead.js

Change this  <script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript"> with the code above.

• To hide the the date or the label column add this CSS code.

.toc-header-col2,.toc-entry-col2{display:none} , if you want to hide date column

.toc-header-col3,.toc-entry-col3{display:none} , if you want to hide the label column

 CODES PROVIDED BY BLOGGERPLUGINS

Update as of March 23, 2017:

The JavaScript above is not working because Dropbox and Googlecode do not allow hosting files anymore like HTML, JS, or CSS. So, I reuploaded the JS file in GitHub. 

Use this link for the meantime:

<script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript">

 Change the highlighted link to this : 
https://mattmorz.github.io/archivenullhead.js