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 />
#bp_toc {
  border: 0px solid #000000;
  padding: 5px;
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #fff;
  color: #000000;
  padding-left: 5px;
.toc-header-col2 {
.toc-header-col3 {
.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 {
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;

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;'>
.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;}
<!-- 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.
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


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 : 

Popular posts from this blog

Set table width to 100% on PDF export in Datatables

Echo of Soul: Huntress Quickdraw Build

GeoDjango + GeoServer + Openlayers Combo!