Saturday, 18 April 2015

Make an Archive Page showing by title in Blogger

Make an Archive Page showing by title in Blogger
In this post i am come with an archive page JavaScript for your blogger blog. With this JavaScript you can make archive page within a mutinies. Archives page alloys helps your blog reader to find older posts easily from your blog archive page.This page will show your blogs posts title by date. This archive pages date will short by month/date/year. This date will show right side of post title and this page will show at last 500 post. Now we are using this JavaScript for our another blog site, where you can see it working fine. So, you can See our screenshot image or click Live Demo button to know how this page is.

How to make a archive page in your blogSpot blog?

This archive page is very easy to make if you follow our instructions carefully. So just follow our given steps bellow to make/create this page.
  • Go to your  blogger blog dashboard.
  • Click on pages tab form dashboard.
  • Click on new page tab and chose blank page.
  • Write your page title as ‘Archives’.
Archives Page for blogger
  • Then Select HTML tab.
  • Now copy all bellows JavaScript codes and past inside the page.
<script type=’text/javascript’>//<![CDATA[
function LoadTheArchive(TotalFeed)
{
var PostTitles = new Array();
var PostURLs = new Array();
var PostYears = new Array();
var PostMonths = new Array();
var PostDays = new Array();
if(“entry” in TotalFeed.feed)
{
var PostEntries=TotalFeed.feed.entry.length;
for(var PostNum=0; PostNum<PostEntries ; PostNum++)
{
var ThisPost = TotalFeed.feed.entry[PostNum];
PostTitles.push(ThisPost.title.$t);
PostYears.push(ThisPost.published.$t.substring(0,4));
PostMonths.push(ThisPost.published.$t.substring(5,7));
PostDays.push(ThisPost.published.$t.substring(8,10));
var ThisPostURL;
for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++)
{
if(ThisPost.link[LinkNum].rel == “alternate”)
{
ThisPostURL = ThisPost.link[LinkNum].href;
break
}
}
PostURLs.push(ThisPostURL);
}
}
DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);
}
function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays)
{
var MonthNames=[“January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”];
var NumberOfEntries=PostTitles.length;
for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
{
NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]
document.write(‘<a href =”‘+PostURLs[EntryNum]+'”>’+PostTitles[EntryNum]+”</a> (“+NameOfMonth+” “+parseInt(PostDays[EntryNum],10)+”, “+PostYears[EntryNum]+”)<br />”);
}
}
//]]></script>
<script type=”text/javascript” src=”/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive”>// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// ]]></script>
  • Last of all save the page and you are done!
Customization’s:
  • If you want to show less or more then 500 posts on the archive page then change the green highlighted text (500).
Now view your page and look its working fine. If you like this post then shear with your social media friends and subscribe our blog to get latest updates to your e-mail inbox.
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks