November 3, 2016

How To Create Blogger Sitemap Page Like WordPress 2016


For a long time now, you can find lots of articles written about creating Blogger sitemap all over the Internet.

By the way, since 2015, you do not have to create and submit your own Blogger sitemap to Google anymore.

Google will automatically create a sitemap.xml file in your root directory for you.

You can view your Blogger sitemap by typing this: http://yourblogname.blogspot.com/sitemap.xml  onto the address bar of the browser.


Note: You need to change 'yourblogname' to your actual blog domain.

Create Blogger Sitemap Page With Bullet List Blog Post Titles


But what I am going to show you here is how to create a Blogger Sitemap Page.

It is a like a table of content of your blog. It will show you a page listing your blog posts with bullet points in front of all the post titles.

Here is how I do it:

Step One:

1. Log into your Blogger Admin.

2. Click 'Pages' and then click 'New page'.

3. For the 'Page title', just type Sitemap.

4. Then click on the 'HTML' button above the text editor (the empty box where you write your blog post).

5. Now paste the set of code as shown below into the text editor.

<div><ul id="postList12"></ul></div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 100;
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
a1E.href = url;
a1E.textContent = title;
liE.appendChild(a1E);
elmt.appendChild(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
}
}
}
sendQuery12();
</script>


 Note: Remember to change the line: https://yourblogname.blogspot.com to your own actual blog domain.

6. Click the orange color 'Publish' button.

7. You have already created a Blogger Sitemap Page.

8. Now click on the 'View' link underneath 'Sitemap'.

9. You should see a bullet point list page showing your blog posts titles.

how to create Blogger sitemap page


Step Two:

1. Now you want to create a link of this newly-created sitemap page on your blog.

2. You can add the sitemap page link at the bottom of your blog. (Like what I have done on this blog)

3.  For this you need to go to your 'Template' to add the link.

4.  Similarly you can add the sitemap page link at the side bar. (Like what I have done on this blog)

5. To do that you have to click 'Layout'.

6. Go to any one of your sidebar of your choice, and click on 'Add a gadget'.

7.  A box pops up, scroll  down until you see the red color 'Pages'.

how to create Blogger Sitemap page tutorial

8.  Click on either the red color icon on the blue color plus sign (+).

9.  Another box called 'Configure Page List' will pop up.

how to create Blogger sitemap step by step

10. You can see the word 'Sitemap' together with a small empty box next to it.

11. Click inside the small box and a tick sign will appear inside.

12. Instantly you can see the word 'Sitemap' pops under the heading 'List Order'.

13. You can remove the word 'Pages' under the word 'Title (optional)'.

14. Finally click the orange color 'Save' button.

15. That's all. Now you can see the word 'Sitemap' on your sidebar.


Written by: Kher Cheng Guan