Wednesday, May 6, 2020
HTML Sitemaps are different from XML Sitemaps that you submit to search engines to improve your crawelling rate or get a quick indexsation of your new posts. HTML Sitemaps, shows an organized list of your published posts, just like a table of content. In this article, we will show you how to add an HTML sitemap page in Blogger
XML Sitemaps vs HTML Sitemaps.
An XML created with the help of an XML markup language and are especially intended for search engines. You can create and submit your site's XML sitemap in webmaster tools, which will not only improve your site's crawling rate but also quick indexation of your site.
On the other hand, HTML sitemaps are created with plain Hyperlink Text Markup Language and are especially intended for your website visitors. It is usually used to list all the post or pages that are published on your site.
You can check the demo of this widget here
Adding an HTML Sitemap With All Posts in Blogger
To add a HTML sitemap in blogger please follow the below instructions correctly.
1. The very first thing you need to do is to add the CSS codes so you can make your sitemap look attractive.
Go to >> Blogger >> Template >> Edit HTML >> Search for ]]></b:skin> tag and just above it paste the following code.
You can also customize the below codes to match your style of template color scheme:
@charset "UTF-8"; #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; }
2. Once everything is done, press Save Template button present at the very top of your screen.
3. Now Simply create a new page where you want to display your sitemap. Go to Blogger >> Pages >> New page.
In the Blogger page editor, select HTML tab and paste the following code in the HTML code editor
<div id="bp_toc"> </div> <script src='http://mybloggerlab.com/js/sitemap.js' type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
4. After pasting the above code, you can write a title of your page. If you wish you can also disable comments because you would not like people posting comments on your sitemap. Once everything is done, press Publish button.
If you enjoyed this article please share your thoughts in comments section below.