Tạo trang lưu trữ blog

 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

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&amp;max-results=500&amp;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>

Nguồn