How To Make Archive As A Site Map For Blogger BlogSpot 2017

How To Make Archive As A Site Map For Blogger BlogSpot

Its Very Easy No need to worry about . please follow thses steps one by one to get desired results.

Step 1: Create A New Page

Open your blog and go to PAGES and click on NEW PAGE. (Fig. 1)

Fig. 1

Name your new page however you want it. But I suggest you put a page name that is clear for your readers to know what the page is all about. Then click on the button that says HTML. (Fig. 2)

Fig. 2

Step 2: Copy and Paste

Now you need to copy and paste the following code into your HTML field.

<script type="text/javascript">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; var currentMonth = "";
var currentYear = ""; for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
{
NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1] if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
currentMonth = NameOfMonth;
currentYear = PostYears[EntryNum]; document.write("<div class='dateStyle'><br />" + currentMonth+" "+currentYear+" </div>");
} document.write('<a href ="'+PostURLs[EntryNum]+'"><div class=dayStyle>'+parseInt(PostDays[EntryNum],10)+":&nbsp;&nbsp;</div> "+PostTitles[EntryNum]+"</a><br />");
}
}
</script> <script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive" /></script> <!--CUSTOMIZATION--><style type="text/css">.dateStyle {
color:#000;
font-weight:bold;
font-size: 15px;
font-family: Arial, sans-serif;
margin: 0;
} .dayStyle {
color:#000;
font-weight:bold;
font-family: Arial, sans-serif;
display: inline-block;
} </style>

It should look like the one below:

Click image to enlarge

Step 3: Customize

Don't freak out! It's just easy.

First you have to look for this:

Click anywhere on the HTML box and hit CTRL + F and type YOURBLOGHERE to find the url that is to be changed easily

Change YOURBLOGHERE.blogspot.com into your web address.

From here, you may publish the page now. Or you can customize its look further.

Just look for the the CSS code at the bottom-most part and customize the highlighted parts according to your preference.

Do not alter the class names e.g. (.dateStyle/.dayStyle)

If you aren't really familiar with CSS, just edit the values between : and ; to be safe.

For example, if you want to change the font color, just change color: #22a9b1; to color: #006DD9; or you may use the names of the colors instead of hexcodes like, color: pink;

Step 4: Publish the page and you're good to go!

That's it. I hope this helps. Please let me know if it works for you. And if you have questions regarding this matter, don't hesitate to hit me a comment.
If you find this helpful, spread the love and share. :)