Create HTML Sitemap Page for Blogger Blog in 5 Easy Steps

If you follow contents on my blog, you�ll find that I recommend adding XML sitemap on GSC to let Google know about your site. Have you ever wondered, if Google can read the index of our blog posts then why not create HTML Sitemap Page for blogger blog?

Then why create two sitemap pages for a single blog?

create-sitemap-page-blogger-blog
HTML Sitemap page for blogger blog

Well, they are not two same sitemap page, but different. One is based on XML and the other an HTML sitemap page.

Confused?

Let�s hit that ground first.

Have a look at this web site�s XML sitemap:

techgydbysm-sitemap-index
XML sitemap for search engines

and now, look at the sitemap page that is visible for users:

techgydbysm-sitemap
See Posts Listed by Category

Evidently, they do look different.

Let�s understand the sitemap page first.

What is a Sitemap page?

A sitemap is simply a straightforward list of your blog posts that typically helps crawlers and bots to crawl your blog properly.

It multiplies your blogs crawl rate and additionally helps in quick classification of your latest posts. Our new sitemap page has all of our blog posts listed in a label classified manner. therefore in this article, I�ve shared the code and also the technique to create one such sitemap page for your blogger blog too.


How to Create XML Sitemap Page for Blogger?

Here we shall learn how to create sitemap page for blogger (using HTML).
udimi

How to Create HTML Sitemap Page for Blogger?

I found so many inefficient resources. So, I started to write codes using CSS and HTML.

In this tutorial, I am going to share the very same idea which I�ve followed on my blog.

Here�s how to create sitemap for blogspot:

  1. Log in to your Blogger Blog.
  2. Select a blog and move on to your blog dashboard.
blogger-dashboard
Choose your blog
  1. Create a new page and add it�s the title as Sitemap.
new-page
Create a New Page
  1. Now, click on the HTML button and copy this code segment from here to that page and paste it there.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<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>
<script src="https://www.yourblog.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script>
  1. Change the domain name in the last line of this code. (www.yourblog.blogspot.com with your blog address)
  2. Save All Changes and Publish that page.
  3. Visit your Sitemap Page. You�ll find a list of all your blog posts arranged on the page.
Advertisement

This list of posts is updated whenever a freshly published post is made LIVE. An icon labelled NEW is added to every fresh post made public.

barn2plugins

Bonus Tip: Create Stylish Grid Like Sitemap Page for Blogger Blog

To create a stylish grid like Sitemap Page for Blogger blog flow the steps carefully:

Step 1 and Step 2 is the same as above.

In Step 3, if you already have a Sitemap Page then hit Edit to make changes to the HTML codes or if your blog doesn�t have one till now then follow Step 3 as above.

Next, erase all pre-existing codes in the Sitemap Page and paste code from below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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://www.yourblog.blogspot.com/view/flipcard"></iframe>
</div>

Click Save after changing the blog address with your blog address. This is what it will look like:

Source: WonderKrish
Sumber : https://techgydbysm.com
 
http://belajar-cara-membuat-website.blogspot.com
http://jasa-akuntansi-bandung.blogspot.com/p/jasa-akuntansi.html
https://omega99data.blogspot.com/
https://ronketodiet.blogspot.com/
https://ronmanagedwp.blogspot.com/

di
Label: , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

How to Contact Facebook Support: 7 Easy (&amp; Direct) Ways

  We�re here for you. Thankfully, Facebook offers many options when seeking support. We developed this guide to show you all the ways to co...