If you constantly publish plenty of articles in your blog then that can quickly populate your blog archive list. So once a visitor clicks on Archive section’s drop-down list button at the sidebar is, he ends up wading through an extremely long list.

In this case, displaying your archives in its own web page might be a good idea. Doing this is fairly quick and simple:

• Login to your Blogger.

• Go to Dashboard.

• Go to Pages, then click on New Page.

• Choose Blank Page.

• Click on HTML (not Compose) viewing mode.

• Give your blank page a title (e.g. My Archives) and then copy/paste the code below in the content field:

<div id="bp_toc">
<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: 5px solid #c1bfbf;
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:18px;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:18px;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:18px;
}
</style>
</div>

• Click on the Publish button and that’s it!