Many bloggers don't prefer to show their blog archive on every page due to the slow page load of their blog and they prefer to show it on a selected page, so if that's what you have be seeking for, then this post should help you with that. follow the few step below and get your blog archive displayed on a separate page.
How To Create Archive Page
- Go to your blogger dashboard
- Click on "Posting" > "Edit Pages" > "NEW PAGE" (For old blogger interface)
- Click on "Pages" > "New Page" > "Blank Page" (For new blogger interface)
- Enter "Archive" as your new page title
- Switch to "Edit HTML" and paste the following code in the content box
<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&max-results=500&callback=loadtoc" type="text/javascript">
</script><br />
<br />
<style>
#bp_toc {
border: 1px 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: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>
<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: 1px 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: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>
- Click on "PUBLISH PAGE"
Hope this help? take few seconds to share it and subscribe for our latest posts update.
Enjoyed This Post? Subscribe For More Update!
Confused? Feel free to ask
Absolutely Fantastic works perfectly, now my readers can find EVERYTHING. One thing, there is a closing div missing
ReplyDeleteWhere?
Deletehow to show another blog contents on another blog??
ReplyDeleteYou can't do that. But later in the future, i may create or come across a hack for that.
Deleteokay,,but this is orginaly Hans hack of beautifulbeta blog
DeleteVery nice.. thanks
ReplyDeleteI used this in three of my blogs. They all worked great. However, with this one blog: http://mavishomework.blogspot.com/p/archives.html, it's off center. There is no border and the Post Date and Labels are run together. Is it because the content is too large?
ReplyDelete