How to Create a HTML Sitemap Page in Blogger : Responsive

Description: HTML Sitemap Page Widget for Blogger compatible with all Blogger Theme. This HTML Sitemap is Responsive.

Should you create a HTML sitemap into your Blogger? Every blog should have at-least one page by which you can navigate to all of your blog posts. Therefore, yes you must create a HTML sitemap into your Blogger. In this post, I will share a cool method to create a responsive sitemap page for your blogger with cool design features. HTML sitemap doesn't only help your visitors to look over your blog at a glance it can help to crawl and index your blog pages faster. Adding Sitemap page in WordPress is so easier than Blogger with the help of tons of plugins, in Blogger, you need to manually add the sitemap widget. Adding this sitemap widget to your blogger is also easier. Just you have to copy the following code, and paste it to your Blogger page and done! Therefore, here is a simple guide to create a HTML responsive sitemap to Blogger.
Live Demo: Blogger Sitemap
how to add html sitemap widget in blogger
More Blogger Tips:

Create a Responsive HTML Sitemap Blogger Page

If you want to create your own hyperlink text URL for your sitemap page, read this post (change blogger static page URLs) before proceeding the current post.
  • Go to 'Blogger Dashboard', and select your Blog.
  • Click on 'Pages' -> 'New Page'. Now, Choose 'HTML' part (near to 'Compose').  
  • Now copy the following code.
    <script src="" type="text/javascript"></script>
    <script src=";alt=json-in-script&amp;callback=loadtoc"></script>
    <style type="text/css">
    .post-archive {width: 100%; padding: 20px 0; text-transform: capitalize; }
    .post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
    .ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
    .ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
    .ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .50s ease-in-out; -moz-transition:all .50s ease-in-out; -o-transition:all .50s ease-in-out; transition:all .50s ease-in-out;text-decoration: none; }
    .ct-columns-3 p a:hover { background: #fff; color: #555;text-decoration: underline; }
    @media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }

    Don't forget to replace '' with your blog link.
  • Finally, click on 'Publish' button.
  • You have created a HTML sitemap for your Blogger blog.
Credit: The script for showing HTML sitemap in Blogger is written by

    Like Us on Social Media
    Share this article
    Copyright © 2015 • All Rights Reserved.
    Powered by Blogger
    back to top