How to Add Sitemap Page in Blogger with Material Design

Share This Post, Help Others!



What is an HTML Sitemap page?


For new bloggers, there may be a confusion between a HTML sitemap and the XML one. the difference is huge. The first is used to provide an updated list of the posts that you have published in your blog. Xml sitemap is used to help index your blog on the search engines.

To have a broader idea about the topic and create one for your site check the following tutorial: How To Create A Sitemap For Your Site Or Blog. Here is a sample HTML sitemap of the result you can preview.



  • How to create a grid view sitemap page for Blogger?
  • Why should I publish a sitemap page in my blog?
  • What is an HTML Sitemap page?


Why Should You Create A Sitemap?

It is one of the necessary pages that includes the titles and latest posts of the blog.The page will certainly help you:
  • Increase traffic to your site.
  • Decreases your bounce rate.
  • Give a professional look and impression to your audience.
  • A fancy catalog of your website.


How To Create HTML Sitemap Page In Blogger?

The task is very easy to implement, just some lines of code to paste in a blank page and that's it! Isn't it? Well here it is step by step: 

Note: The provided code will create lists of your posts. The page will be updated automatically as soon as you publish new ones.


How To Create a HTML Sitemap


First follow these steps:

  1. Login to you Blogger dashboard.
  2. Backup your template first.
  3. Head to Pages then Create a new page.
  4. Switch to HTML Viewer.
  5. Delete all the text.
  6. Download the code from the link below.
  7. With Ctrl+C to copy and Ctrl+V to paste the code in its appropriate place.
  8. Save your template and exit.


Sitemap Page Code with Material Design

Now download, copy and paste the following code lines from the link below in the newly created Page and hit publish to become alive: 


???? Subscribe to our channel to get exclusive & free tech tips & hacks ????


Important Notice

Note: If your page has content previously, make sure you delete everything before pasting the code.

And that's it! Congratulations, now you have successfully created a responsive HTML sitemap in Blogger. You can feature the page in your links. If you face any issues implementing the page, feel free to comment below. And Happy Blogging!! ????

Share This Post, Help Others!

Other Popular Articles ...

Leave a Reply

Back to top button
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.
Sharing is caring

Ad Blocker Detected :(

Please consider supporting us by disabling your ad blocker.

من فضلك قم بتعطيل أداة مانع الإعلانات أدبلوك من المتصفح للدخول للموقع أو إستخدم متصفح آخر
شكرا لتفهمك وزيارتك