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.

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 xml-sitemaps.com. Give it the URL of your website, and it will create you the sitemap in XML and HTML format, both ready to use.

Demo
Click here

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

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;}

4. Navigate to pages and click Create New Page
5. Give your Page a title Sitemap
6. Switch to HTML and paste the given code then press Compose

<div id="bp_toc"> </div> <script src="https://cdn.rawgit.com/knigulper/github.io/gh-pages/knigulper.com/sitemap.js" 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>

7. Click Publish
8. Finally, click Save Theme and you are done.

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

Share this post