How To Create Html Sitemap Page In Blogger

How To Create Html Sitemap Page In Blogger

You must have created XML sitemaps for your blogger blog but let me explain you the difference between Html sitemaps and Xml sitemaps, Html sitemaps is used by your readers to see all your blog posts in one place whereas Xml sitemaps are for search engines and users cannot understand it properly and they are not clickable text So if you are using blogger then you mustcreate Html sitemaps page in your blogger blog for giving your user a place to find all your blog posts

Html Sitemap is one of the most important page every blogger must have because it help crawlers to properly index your blog content and all it pages also it help search engine to find all the blog post from your blog which will drastically improve your indexing rate and you blog post will be crawled properly, Many times it happen that you do on page SEO by interlinking your blog posts but for some reason you changed some url's of your blog post which search crawlers will never be able to crawl from that link and it' also helps to showcase all your blog posts either for a particular label or from your complete blog to your readers so they don't have to dig deep in your archieves

How To Create Html Sitemap Page In Blogger

Another great advantage of creating Html sitemaps page for blogger blog is that it can help you to improve your pagerank and also it will increase your pageviews and bounce rates which is great for your blog SEO Thus without wasting much of your precious time lets jump straight to create Html sitemap for your blogger blog

You can create Blogger Html sitemaps in two ways like if you want to show all posts for a particular label else to show all your posts which will include all the posts from every label So lets see one by one

Create Html Sitemap Page For All Labels In Blogger

1) First login to your blogger dashboard 

2) Click on Pages then New page

3) Now go to HTML Mode and paste the below code

<script type=”text/javascript”>
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
 for (var i = 0; i < numposts; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
     if (entry.link[k].rel == ‘alternate’) {
       posturl = entry.link[k].href;
       break;
     }}
   posttitle = posttitle.link(posturl);
   if (standardstyling) document.write(‘<li>’);
   document.write(posttitle);}
   if (standardstyling) document.write(‘</li>’);
}
</script>
<ul>
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src=”http://www.YOURBLOGURL.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999″></script>
</ul>

4) Now change www.YOURBLOGURL.com with your blog url and click on Save and Publish that's it you have successfully created blogger html sitemap for all labels



OR

You can try this simple html sitemap page for blogger which shows blog title, date and labels simply copy and paste the below code in html view and hit publish



<div dir="ltr" style="text-align: left;" trbidi="on"><div id="bp_toc">Loading TOC. Please wait....</div><script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script><div style="clear: both; margin: 10px 0;"></div><div id="bpslidein_place_holder"></div><div style="clear: both;"></div><div class="post-footer"><div class="post-footer-line post-footer-line-1"><span class="post-comment-link"></span></div><div class="post-footer-line post-footer-line-2"><span class="post-backlinks post-comment-link"></span><span class="star-ratings"></span></div><div class="post-footer-line post-footer-line-3"><span class="reaction-buttons"></span></div></div></div>

Create Html Sitemap Page For Particular Labels In Blogger

In the above page it is going to show posts from your blog which will include all posts from all labels but if you want to show only posts from particular label then insted of the previous code paste the below mentioned code which will show only posts from particular labels from your blogger blog

<script type=”text/javascript”>
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
 for (var i = 0; i < numposts; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
     if (entry.link[k].rel == ‘alternate’) {
       posturl = entry.link[k].href;
       break;
     }}
   posttitle = posttitle.link(posturl);
   if (standardstyling) document.write(‘<li>’);
   document.write(posttitle);}
   if (standardstyling) document.write(‘</li>’);
}
</script>
<ul>
<script src=”http://www.nicebloggingtip.com/feeds/posts/default/-/Label%20Name?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999″></script>
</ul>

Again change www.nicebloggingtips.com with your blog url and Label%20Name with your label name for which you want to show blog posts for

One important note here is that labels are case sensitive which means if you will post blogging tips instead of BloggingTips then it will not works so put exactly the same as you named your labels and also if your label contains more than 1 word then do put %20 between each word for example if your label name is traffic tips then put traffic%20tips then and then only it will work

After this click on publish and you have successfully created blogger html sitemap for particular labels from your blog

So friends this is how to create Html sitemap page in blogger and if you have any doubt please ask me in comment section and don't forget so subscribe below for getting more blogger tips and tricks which will help your blogger blog to stand out from the crowd and Keep Blogging!