Wednesday, 7 December 2016

jQuery Plugin: Adding HTML Sitemap Page to Blogger

Are you looking to construct an HTML sitemap in BlogSpot? Unlike XML sitemaps which you submit to the search engines for much Improved crawler. HTML sitemaps display an organized list of your pages for your users and search engines as well. HTML sitemap is written or generated in plain HTML, and it usually lists all the pages and posts that are available on your site.

HTML Sitemap for BlogSpot

Pay Attention: How To Create/Add Sticky Navigation Menu Widget To Blogger

In Blogger sitemap plug-in, we have used the jQuery which updates the sitemap of your website every time you publish a new post. Another less automated way to do the job is generating your sitemap using free web-based tools, like Give it the URL of your website, and it will create you the sitemap in XML and HTML format, both ready to use.

HTML sitemap is supposed to be geared towards your actual website visitors. It can be a hierarchical list of published pages and posts on your site organized by topics on a single page. Having an HTML sitemap page help the search engines to find the all your published contents in one place and it accelerates the index rate that is a brilliant technique to increase your SEO.

Check out: How To Create a Static Landing Page in BlogSpot Blogs

Adding HTML Sitemap Page to Blogger (step by step)

  1. Login to Blogger Dashboard > Template > Edit HTML
  2. Search for ]]></b:skin> or </style>
  3. Just above it paste the following CSS code
  4. You can also customize the CSS codes to match your style of template color scheme.

    /* Sitemap plugin By Knigulper */#bp_toc { color: #666; margin: 0 auto; padding: 0; border: 1px solid #d2d2d2; float: left; width: 100%;}span.toc-note { display: none;}#bp_toc tr:nth-child(2n) { background: #f5f5f5;}td.toc-entry-col1 a { font-weight: bold; font-size: 14px;}.toc-header-col1,.toc-header-col2,.toc-header-col3 {background:#9E9E9E;}.toc-header-col1 { padding: 10px; width: 250px;}.toc-header-col2 { padding: 10px; width: 75px;}.toc-header-col3 { padding: 10px; width: 125px;}.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: #fff; font-weight: 700; 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: 5px; padding-left: 5px; font-size: 12px;}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a { color: #666; font-size: 13px; text-decoration: none}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover { text-decoration:underline;}#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); min-width: 1em; min-height: 3em; float: left; border-right: 1px solid #fff; text-align: center; padding: 0px 11px 1px 6px; margin-right: 15px;}td.toc-entry-col2 { text-align: center;}
  5. Navigate to pages and click Create New Page
  6. Give your Page a title Sitemap
  7. Switch to HTML and paste the given code then press Compose
  8. <div id="bp_toc"> </div> <script src="" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> </div>
  9. Click Publish
  10. Finally, click Save Theme and you are done.

Now whenever, you publish new contents the plugin will automatically display them on your sitemap page.

Discover How to Grow Your Blog to 2k+ Visits /Day

Get Free Access

More From Knigulper

Comment Policy

Please Keep in mind that all comments are moderated manually & by default, all the links in comment area are set to nofollow. Using hyperlinks in comment is forbidden and such comments will not be published. Let's enjoy a spam-free conversation.


  1. sitemap worked well, thank u but css isnt working

    1. You have already added a number of CSS files in your b:skin section. try to locate the </style> and paste the CSS right above it.

  2. thank you this is very good, can you add small size thumbnail image beside the items.

  3. the sitemap worked for my site, thanks for sharing.

  4. i tried my blog but not working; can you give me responsive html sitemap

    1. First, install jQuery plugin to your theme and you'll definitely get better results.