Best Way to Create an HTML Sitemap Step by Step for beginner blogger

Create-an-html-SitemapAre you a blogger? Don’t have an HTML sitemap for your website and want to create an HTML sitemap for your website? If yes, then read this article carefully, all your problems will be solved. This HTML sitemap is dynamic that updates automatically and is stylish and beautiful.

Here you will find five types of design of HTML sitemap. Do you want to know how to create a sitemap for a website?

What is an HTML Sitemap?

It is a list of pages and posts of a website or blog. It is an HTML code page on the website. It is like a roadmap. It is a blog’s navigation system for posts and pages describing where a particular post or page is located on the website.

There are two types of HTML sitemap

  • Designer Sitemap: It is used during the planning of the design of a website or blog. like Templates of the website.
  • HVL (Human Visible Listings): It is a list of pages and posts of a website. It is created on the website for navigation of posts.

Why is HTML Sitemap Required?

This page provides a list of all created posts with visitors grouped together like an index. So that visitors can understand and read the latest and previous in sitemap page.

So it is very important for every blogger to make it, without sitemap page users cannot find the past data of our blog or website. Providing this facility increases blogger’s page views and HTML sitemap is also important for SEO.

Benefits of HTML Sitemap

  1. It gives navigation to visitors for posts on the website.
  2. It is used to give ranking to your blog in search engines. If you want your blog to post top rank in a search engine, submit a sitemap to the search engine.
  3. It is used for designing a bog.

How to create an HTML sitemap

Steps are given below to generate a sitemap for the website

1. Open google blogger account login page
2. Click on the Pages tab in the left side menu.
3. Click on Create NEW PAGE tab on the top left side menu.
how-to-create-an-html-sitemap
4. Give title in the title bar as Sitemap.
generate-sitemap-for-google

 

5. Below the title in the top left corner change the view in “HTML View
html-sitemap-seo
6. Now Copy Below given HTML Code and paste it into the page content in HTML view.
 
Here you are being given five types of HTML sitemap template examples and codes. There is no requirement for html sitemap generator for blogger
Note: Follow the codes and steps given here carefully and in the manner mentioned, otherwise the sitemap of your website will not be generated correctly.

Style 1. Copy the below code and paste it on your sitemap page save and publish. Click to preview Style 1 created HTML sitemap.

Note: Replace img URL with your website Logo image Url. Also, the image must be in PNG format.

<div class="separator" style="clear: both; text-align: center;">
<!--Replace highlighted URL with your website Logo image Url. Also, the image is in PNG format-->
<ahref="https://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.png" style="margin-left: 1em; margin-right: 1em;">
<img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="https://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.png" title="Sitemap Arlina Code" />
</a>
</div>
<div id="bp_toc"> 
</div> 
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript">
</script>
 <style scoped="" type="text/css">
#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;
max-height:686px;overflow:hidden;overflow-y:auto
}
span.toc-note{margin:0 auto 25px auto;
text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;
padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;
color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;
background-color:#f5f5f5;width:75px
}
.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{
}#bp_toc td.toc-header-col2{
}#bp_toc td.toc-header-col3{
}.post td{background:transparent
}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,
#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}
#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3
}
.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:13px;text-decoration:none;color:#aaa;
font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,
.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none
}
.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}
.toc-entry-col1 a,.toc-entry-col2 a,

.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,
.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;
counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td
.toc-entry-col1:first-child::before{content:counter(rowNumber);
display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:
#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;
line-height:1.7} #bp_toc td.toc-entry-col1
{
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px} 
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:10px;height:5px}
#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}
#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover
{
background-color:rgba(0,0,0,.25)} @media screen and (max-width:768px)
 {
 #bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;
text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,
#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,
#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}</style>

Style 2. Copy the below code and paste it on your sitemap page save and publish. Click to preview Style 2 created HTML sitemap.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:8px 10px;font:normal bold 12px/normal Helmet,Poppins,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:15%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 10px/26px Helmet,Poppins,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:78%;float:right;position:absolute;top:0px;right:0;bottom:0;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,Poppins,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #05A6F7;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#F0F9FD;box-shadow:2px 0 7px rgba(0,0,0,.4);color:#000}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<br />
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Loading Sitemap…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/[email protected]/tabbed-toc.min.js"></script></div>

Style 3. Copy the below code and paste it on your sitemap page save and publish. Click to preview Style 3 created HTML sitemap. 

Note: Replace the highlighted part with your blog URL

<script type='text/javascript'>
var postTitle = new Array();

var postUrl = new Array();

var postPublished = new Array();

var postDate = new Array();

var postLabels = new Array();

var postRecent = new Array();

var sortBy = "titleasc";

var numberfeed = 0;

function bloggersitemap(a) {

function b() {

if ("entry" in a.feed) {

var d = a.feed.entry.length;

numberfeed = d;

ii = 0;

for (var h = 0; h < d; h++) {

var n = a.feed.entry[h];

var e = n.title.$t;

var m = n.published.$t.substring(0, 10);

var j;

for (var g = 0; g < n.link.length; g++) {

if (n.link[g].rel == "alternate") {

j = n.link[g].href;

break

}

}

var o = "";

for (var g = 0; g < n.link.length; g++) {

if (n.link[g].rel == "enclosure") {

o = n.link[g].href;

break

}

}

var c = "";

if ("category" in n) {

for (var g = 0; g < n.category.length; g++) {

c = n.category[g].term;

var f = c.lastIndexOf(";");

if (f != -1) {

c = c.substring(0, f)

}

postLabels[ii] = c;

postTitle[ii] = e;

postDate[ii] = m;

postUrl[ii] = j;

postPublished[ii] = o;

if (h < 10) {

postRecent[ii] = true

} else {

postRecent[ii] = false

}

ii = ii + 1

}

}

}

}

}

b();

sortBy = "titledesc";

sortPosts(sortBy);

sortlabel();

displayToc();

}

function sortPosts(d) {

function c(e, g) {

var f = postTitle[e];

postTitle[e] = postTitle[g];

postTitle[g] = f;

var f = postDate[e];

postDate[e] = postDate[g];

postDate[g] = f;

var f = postUrl[e];

postUrl[e] = postUrl[g];

postUrl[g] = f;

var f = postLabels[e];

postLabels[e] = postLabels[g];

postLabels[g] = f;

var f = postPublished[e];

postPublished[e] = postPublished[g];

postPublished[g] = f;

var f = postRecent[e];

postRecent[e] = postRecent[g];

postRecent[g] = f

}

for (var b = 0; b < postTitle.length - 1; b++) {

for (var a = b + 1; a < postTitle.length; a++) {

if (d == "titleasc") {

if (postTitle[b] > postTitle[a]) {

c(b, a)

}

}

if (d == "titledesc") {

if (postTitle[b] < postTitle[a]) {

c(b, a)

}

}

if (d == "dateoldest") {

if (postDate[b] > postDate[a]) {

c(b, a)

}

}

if (d == "datenewest") {

if (postDate[b] < postDate[a]) {

c(b, a)

}

}

if (d == "orderlabel") {

if (postLabels[b] > postLabels[a]) {

c(b, a)

}

}

}

}

}

function sortlabel() {

sortBy = "orderlabel";

sortPosts(sortBy);

var a = 0;

var b = 0;

while (b < postTitle.length) {

temp1 = postLabels[b];

firsti = a;

do {

a = a + 1

} while (postLabels[a] == temp1);

b = a;

sortPosts2(firsti, a);

if (b > postTitle.length) {

break

}

}

}

function sortPosts2(d, c) {

function e(f, h) {

var g = postTitle[f];

postTitle[f] = postTitle[h];

postTitle[h] = g;

var g = postDate[f];

postDate[f] = postDate[h];

postDate[h] = g;

var g = postUrl[f];

postUrl[f] = postUrl[h];

postUrl[h] = g;

var g = postLabels[f];

postLabels[f] = postLabels[h];

postLabels[h] = g;

var g = postPublished[f];

postPublished[f] = postPublished[h];

postPublished[h] = g;

var g = postRecent[f];

postRecent[f] = postRecent[h];

postRecent[h] = g

}

for (var b = d; b < c - 1; b++) {

for (var a = b + 1; a < c; a++) {

if (postTitle[b] > postTitle[a]) {

e(b, a)

}

}

}

}







function displayToc() {

var a = 0;

var b = 0;

while (b < postTitle.length) {

temp1 = postLabels[b];

document.write("");

document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');

firsti = a;

do {

document.write("<p>");

document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");

if (postRecent[a] == true) {

document.write(' - <strong><span>New!</span></strong>')

}

document.write("</a></p>");

a = a + 1

} while (postLabels[a] == temp1);

b = a;

document.write("</div></div>");

sortPosts2(firsti, a);

if (b > postTitle.length) {

break

}

}

} <!-- Past your blog URL -->

</script>

<script src="https://yourblog.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script>

Style 4. Copy the below code and paste it on your sitemap page save and publish. Click to preview Style 4 created HTML sitemap. 

 
Note: Replace the highlighted part with your blog URL
<script type='text/javascript'>
var postTitle = new Array();
var postUrl = new Array();
var postPublished = new Array();
var postDate = new Array();
var postLabels = new Array();
var postRecent = new Array();
var sortBy = “titleasc”;
var numberfeed = 0;
function bloggersitemap(a) {
function b() {
if (“entry” in a.feed) {
var d = a.feed.entry.length;
numberfeed = d;
ii = 0;
for (var h = 0; h < d; h++) {
var n = a.feed.entry[h];
var e = n.title.$t;
var m = n.published.$t.substring(0, 10);
var j;
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == “alternate”) {
j = n.link[g].href;
break
}
}
var o = “”;
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == “enclosure”) {
o = n.link[g].href;
break
}
}
var c = “”;
if (“category” in n) {
for (var g = 0; g < n.category.length; g++) {
c = n.category[g].term;
var f = c.lastIndexOf(“;”);
if (f != -1) {
c = c.substring(0, f)
}
postLabels[ii] = c;
postTitle[ii] = e;
postDate[ii] = m;
postUrl[ii] = j;
postPublished[ii] = o;
if (h < 10) {
postRecent[ii] = true
} else {
postRecent[ii] = false
}
ii = ii + 1
}
}
}
}
}
b();
sortBy = “titledesc”;
sortPosts(sortBy);
sortlabel();
displayToc();
}
function sortPosts(d) {
function c(e, g) {
var f = postTitle[e];
postTitle[e] = postTitle[g];
postTitle[g] = f;
var f = postDate[e];
postDate[e] = postDate[g];
postDate[g] = f;
var f = postUrl[e];
postUrl[e] = postUrl[g];
postUrl[g] = f;
var f = postLabels[e];
postLabels[e] = postLabels[g];
postLabels[g] = f;
var f = postPublished[e];
postPublished[e] = postPublished[g];
postPublished[g] = f;
var f = postRecent[e];
postRecent[e] = postRecent[g];
postRecent[g] = f
}
for (var b = 0; b < postTitle.length – 1; b++) {
for (var a = b + 1; a < postTitle.length; a++) {
if (d == “titleasc”) {
if (postTitle[b] > postTitle[a]) {
c(b, a)
}
}
if (d == “titledesc”) {
if (postTitle[b] < postTitle[a]) {
c(b, a)
}
}
if (d == “dateoldest”) {
if (postDate[b] > postDate[a]) {
c(b, a)
}
}
if (d == “datenewest”) {
if (postDate[b] < postDate[a]) {
c(b, a)
}
}
if (d == “orderlabel”) {
if (postLabels[b] > postLabels[a]) {
c(b, a)
}
}
}
}
}
function sortlabel() {
sortBy = “orderlabel”;
sortPosts(sortBy);
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
firsti = a;
do {
a = a + 1
} while (postLabels[a] == temp1);
b = a;
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
}
function sortPosts2(d, c) {
function e(f, h) {
var g = postTitle[f];
postTitle[f] = postTitle[h];
postTitle[h] = g;
var g = postDate[f];
postDate[f] = postDate[h];
postDate[h] = g;
var g = postUrl[f];
postUrl[f] = postUrl[h];
postUrl[h] = g;
var g = postLabels[f];
postLabels[f] = postLabels[h];
postLabels[h] = g;
var g = postPublished[f];
postPublished[f] = postPublished[h];
postPublished[h] = g;
var g = postRecent[f];
postRecent[f] = postRecent[h];
postRecent[h] = g
}
for (var b = d; b < c – 1; b++) {
for (var a = b + 1; a < c; a++) {
if (postTitle[b] > postTitle[a]) {
e(b, a)
}
}
}
}
function displayToc() {
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
document.write(“”);
document.write(‘<div class=”post-archive”><h4>’ + temp1 + ‘</h4><div class=”ct-columns”>’);
firsti = a;
do {
document.write(“<p>”);
document.write(‘<a ” href=”‘ + postUrl[a] + ‘”>’ + postTitle[a] + “”);
if (postRecent[a] == true) {
document.write(‘ – <strong><span>New!</span></strong>’)
}
document.write(“</a></p>”);
a = a + 1
} while (postLabels[a] == temp1);
b = a;
document.write(“</div></div>”);
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
} <!– Past your blog URL –>
</script>
<style type="text/css">   .grid-sitemap {    overflow: hidden;    position: relative;    height: 565px;    margin: 20px 0 40px 0;   }   .grid-sitemap iframe {     display: block;     width: 100%;     height: 680px;     margin-top: -115px;     margin-left: -5px;   }   </style>   <div class="grid-sitemap">  
<iframe src="https://your.blogspot.com/view/flipcard"></iframe>   </div>
Style 5. Copy the below code and paste it on your sitemap page save and publish. Click to preview Style 5 created HTML sitemap.  
 
Note: Replace the highlighted part with your blog URL
<script type='text/javascript'>

var postTitle = new Array();
var postUrl = new Array();
var postPublished = new Array();
var postDate = new Array();
var postLabels = new Array();
var postRecent = new Array();
var sortBy = “titleasc”;
var numberfeed = 0;
function bloggersitemap(a) {
function b() {
if (“entry” in a.feed) {
var d = a.feed.entry.length;
numberfeed = d;
ii = 0;
for (var h = 0; h < d; h++) {
var n = a.feed.entry[h];
var e = n.title.$t;
var m = n.published.$t.substring(0, 10);
var j;
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == “alternate”) {
j = n.link[g].href;
break
}
}
var o = “”;
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == “enclosure”) {
o = n.link[g].href;
break
}
}
var c = “”;
if (“category” in n) {
for (var g = 0; g < n.category.length; g++) {
c = n.category[g].term;
var f = c.lastIndexOf(“;”);
if (f != -1) {
c = c.substring(0, f)
}
postLabels[ii] = c;
postTitle[ii] = e;
postDate[ii] = m;
postUrl[ii] = j;
postPublished[ii] = o;
if (h < 10) {
postRecent[ii] = true
} else {
postRecent[ii] = false
}
ii = ii + 1
}
}
}
}
}
b();
sortBy = “titledesc”;
sortPosts(sortBy);
sortlabel();
displayToc();
}
function sortPosts(d) {
function c(e, g) {
var f = postTitle[e];
postTitle[e] = postTitle[g];
postTitle[g] = f;
var f = postDate[e];
postDate[e] = postDate[g];
postDate[g] = f;
var f = postUrl[e];
postUrl[e] = postUrl[g];
postUrl[g] = f;
var f = postLabels[e];
postLabels[e] = postLabels[g];
postLabels[g] = f;
var f = postPublished[e];
postPublished[e] = postPublished[g];
postPublished[g] = f;
var f = postRecent[e];
postRecent[e] = postRecent[g];
postRecent[g] = f
}
for (var b = 0; b < postTitle.length – 1; b++) {
for (var a = b + 1; a < postTitle.length; a++) {
if (d == “titleasc”) {
if (postTitle[b] > postTitle[a]) {
c(b, a)
}
}
if (d == “titledesc”) {
if (postTitle[b] < postTitle[a]) {
c(b, a)
}
}
if (d == “dateoldest”) {
if (postDate[b] > postDate[a]) {
c(b, a)
}
}
if (d == “datenewest”) {
if (postDate[b] < postDate[a]) {
c(b, a)
}
}
if (d == “orderlabel”) {
if (postLabels[b] > postLabels[a]) {
c(b, a)
}
}
}
}
}
function sortlabel() {
sortBy = “orderlabel”;
sortPosts(sortBy);
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
firsti = a;
do {
a = a + 1
} while (postLabels[a] == temp1);
b = a;
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
}
function sortPosts2(d, c) {
function e(f, h) {
var g = postTitle[f];
postTitle[f] = postTitle[h];
postTitle[h] = g;
var g = postDate[f];
postDate[f] = postDate[h];
postDate[h] = g;
var g = postUrl[f];
postUrl[f] = postUrl[h];
postUrl[h] = g;
var g = postLabels[f];
postLabels[f] = postLabels[h];
postLabels[h] = g;
var g = postPublished[f];
postPublished[f] = postPublished[h];
postPublished[h] = g;
var g = postRecent[f];
postRecent[f] = postRecent[h];
postRecent[h] = g
}
for (var b = d; b < c – 1; b++) {
for (var a = b + 1; a < c; a++) {
if (postTitle[b] > postTitle[a]) {
e(b, a)
}
}
}
}

function displayToc() {
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
document.write(“”);
document.write(‘<div class=”post-archive”><h4>’ + temp1 + ‘</h4><div class=”ct-columns”>’);
firsti = a;
do {
document.write(“<p>”);
document.write(‘<a ” href=”‘ + postUrl[a] + ‘”>’ + postTitle[a] + “”);
if (postRecent[a] == true) {
document.write(‘ – <strong><span>New!</span></strong>’)
}
document.write(“</a></p>”);
a = a + 1
} while (postLabels[a] == temp1);
b = a;
document.write(“</div></div>”);
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
}
</script> <!– Past your blog URL –>
<script type=”text/javascript”> var numposts = 9999; var standardstyling = true; function showrecentposts(json) { for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == ‘alternate’) { posturl = entry.link[k].href; break; } } posttitle = posttitle.link(posturl); if (standardstyling) document.write(‘<li>’); document.write(posttitle); } if (standardstyling) document.write(‘</li>’); }</script> <br /><ul> <script src=”https://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=9999″></script></ul>



Note: Replace the highlighted part with your blog URL

Share this post

Leave a Comment