How to Create Blogger Archive Page With Custom Multiple Label

customize blogger archive widget, blogger archive page with thumbnails, blogger archive gadget, blog archive html code, blogger index page, how to archive posts in blogger, blogger archive link, how to customize blog archive in blogger,Search for multiple labels on Blogger, Blogger multiple label search, How to Create Sitemap Archive Page for Blogger, How to get automatic blog archive page in Blogger, Multiple Label Searching, Search Label URL customization for multiple labels, Blogger Multiple label Query

Struggling enough to get tutorial about blogger archive page with custom multiple label i came out with this basic for beginner posting.


How to Create Blogger Archive Page With Custom Multiple Label

Did you ever wanted to create an archive listpage for blogger, as been written by Sarah Morena@Sarwrites ( Create an Archive List/Page for Blogger By Sarah Morena@ Sarwrites ) ?
But with more specific label? Your custom single label? Or your custom multiple Label?
image from sarwrite

Image from sarwrite by sarah morena

Today i’ll try to show some modification to what sara morena wrote, basically mine was a pure combination from her’s post plus several source references which i’ve referred them in this post’s footnotes.

Easy step for me as a blogger newbie. I assume it should be easy for many of us too, since it doesn’t need much coding. Only you have to change some lines to your needs.

Here you can refer to the example from this blog first –>

Now lets see what you can do with your custom modification.

3 Steps

Step 1: Create A New Page.

Open your blog and go to PAGES and click on NEW PAGE.

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.

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];
var ThisPostURL;
for(var LinkNum=0; LinkNum <; LinkNum++)
if([LinkNum].rel == "alternate")
ThisPostURL =[LinkNum].href;

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)+":  </div> "+PostTitles[EntryNum]+"</a><br />");

<script src="<div style="line-height: 40px;

" />

<style type="text/css">
.dateStyle {
font-size: 15px;
font-family: Arial, sans-serif;
margin: 0;

.dayStyle {
font-family: Arial, sans-serif;
display: inline-block;


Step 3: Customize

Look for these:

1. Change

to your web / blogger address.

2. Edit the Label to yours. For example, change the Label “Blog” to “Travel” or anything suits your label. Make sure its parallel with your post’s label lettercase either uppercase or lowercase must be exactly the same.

If your label is more than one word, make sure to add %22 before the beginning of the first word of the label, and another %22 after the end of the last word of the label.

Also never forget to add %20 between two words. Otherwise it wont work at all, or only one label will be shown.

For example, if you have “Kuala Lumpur City” as your Label, then do as follow :


3. Be sure to add “vertical bar( | )” between two label. For example, to add Label “Kuala Lumpur City” and Label “Blog” , do as follow :


Likewise if you want to have only “One Label”, just add label as follow :|updated-min=2015-01-01T00:00:00%2B08:00&updated-max=2017-01-01T00:00:00%2B08:00&max-results=100&alt=json-in-script&callback=LoadTheArchive

or if your label is more than a word do as follow :|updated-min=2015-01-01T00:00:00%2B08:00&updated-max=2017-01-01T00:00:00%2B08:00&max-results=100&alt=json-in-script&callback=LoadTheArchive

4. You can edit the date to your need. For example, change “2015-01-01” to “2013-05-15” or change “2017-01-01” to “2019-06-16”.

5. And for the last, you can configure your archive to be shown as many as you want to. For example, change “100” to “300” and so on.

Finally, thats all. Go publish your page for now. It should be working as you wish.

Hope it help. Leave a comment if you need any help.


Tinggalkan Balasan

Alamat e-mel anda tidak akan disiarkan. Medan diperlukan ditanda dengan *