4 Elegant Sitemap Page Widgets for Blogger

A Sitemap page is one of the most important page that every blogger should add to their blog. Sitemap is a collection of all posts in a blog in a single page, that's why we can also call it as Table of Contents of our blog articles. This sitemap widget for blogger will display the names of your posts and that names are the link to your articles. Your readers will also know if what categories that articles belong and every new post has a New! word at the end of the title in the sitemap. In simple words, sitemap is the index of all our posts in blogger

By using this sitemap page widget, our visitor can easily navigate and see all of our published posts. This sitemap page for blogger is user-friendly, our blog readers can easily find articles under different categories, or under the categories, they are interested in. This is also an SEO friendly widgets, it can help your blog traffic to increase and reduce your bounce rate. Another important role of this widget in your SEO is the internal linking of articles. This can improve your internal backlinks, and backlinks play important role in today's Search Engine Optimization.

This sitemap page widgets has 4 different design, so you can choose easily the design that fit in your blog template. The code of this sitemap was published by top 3 blogs about blogger, I'm not the one who coded the scripts and designs, credit to the coders of this 4 Elegant Sitemap Page Widgets for Blogger

Related Pots: Top Commentataors Widget with Avatars for Blogger |Add Simple random Posts Widget To Blogger | Floating Social Media button Widget or Blogger | Simple Recent Posts Widget for Blogger

Some of these widgets will work in your blog and the others will not work, it depends on how your blog template was coded. But I'm sure that one of this sitemap widgets will work in your blog, just like mine.

How To Add  Sitemap Page Widgets to Blogger

1.) Go to your blogger dashboard >>> Go to Page >>> New Page >>> from Compose switch to HTML.
2.) Select 1 of the 4 widget codes from the 4 options below. Select the code you want and COPY it.

3.) Now PASTE the code in your page, Make sure that you already switch to HTML or else the code will not work.

4.) in PAGE write the title SITEMAP or whatever you want to name your sitemap. Example: My Sitemap etc.

6.) In the right side, Page Settings >>> Options  >>> Reader Comments >>> and select the Don't allow

This setting will not allow your readers to comment in your sitemap. This is just an optional.

5.) Don't forget to hit the PUBLISH button.

Sitemap Page Widget Code 1

The design of this widget is very simple, it has categories under the categories there are posts titles that are blue in color.

<style>p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}a.post-titles {color: #0000FF;}ol li{list-style-type:decimal;line-height:25px;}</style><script>//<![CDATA[var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://helplogger.blogspot.com/2013/12/add-sitemap-table-of-contents-to-blogger.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCx_PgmC9qHSvc81y5EHAGebcNLns3T0qfCy2SzLZkddxhW256aGFxPs0lxFAYEdStURZ1Gx0fFWJINk0nYdwO_ZCHqLwSsR7_guLdd8nJ4Nkju8ANxUxw9yC9IKAAzfUJ_XYvh405rc-/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};//]]></script><script src="http://whowantstuffs.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Widget 1 Code Customization
color: #242424; font-size: 15px; | 

• Replace the value in blue to change the color and size of categories.

color: #0000FF;

• Replace the value in green to change the color of the links.

http://whowantstuffs.blogspot.com

• Replace it with the address of your blog. Be careful for the double forward slash / before feeds

Sitemap Page Widget Code 2

This is what I'm using in this blog, as of January 9, 2016. Because the other code is not working with my template. I will update my sitemap soon.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<br />
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://whowantstuffs.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Widget 2 Code Customization
http://whowantstuffs.blogspot.com

• Replace it with the URL of your blogger, be careful of double forward slash /. 
• If your using free Blosgspot domain and it's automatically redirect to your country Example: http://whowantstuffs.blogspot.in change the .in to .com, http://whowantstuffs.blogspot.com

Sitemap Page Widget Code 3

This second sitemap widget proves that simplicity is beauty in blogging, just try it in your blog.

<script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script>
<script src="http://whowantstuffs.blogspot.com/feeds/posts/default?max-results=9999&amp;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; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@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; } }
</style>

Widget 3 Code Customization

http://whowantstuffs.blogspot.com

• Replace it with the URL of your blogger blog. Please be careful with a double forward slash / before feeds.

Sitemap Page Widget Code 4

This second widget has a design the categories is in the left side while the posts titles are in the right side.

<div id="tabbed-toc">
<span class="loading">Loading Sitemap, Please Wait for a Moment...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {    blogUrl: "http://whowantstuffs.blogspot.com", // Enter your blog URL    containerId: "tabbed-toc", // Container ID    activeTab: 1, // The default active tab index (default: the first tab)    showDates: false, // `true` to show the post date    showSummaries: false, // `true` to show the posts summaries    numChars: 200, // Number of summary chars    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)    thumbSize: 40, // Default thumbnail size    noThumb: "", // A "no thumbnail" URL    monthNames: [ // Array of month names        "January",        "February",        "March",        "April",        "May",        "June",        "July",        "August",        "September",        "October",        "November",        "December"    ],    newTabLink: true, // Open link in new window. `false` to open in same window    maxResults: 99999, // Maximum post results    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")    sortAlphabetically: true, // `false` to sort posts by published date    showNew: 7, // `false` to hide the "New!" mark in most recent posts or //define how many recent posts are to be marked by changing the number    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for//the "New!" text};</script><script src="https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/" type="text/javascript"></script><style>/*Sitemap  */#tabbed-toc { width: 99%; margin: 0 auto; overflow: hidden !important; position: relative; color: #222; border: 0; border-top: 5px solid #FC0204; background-color: #1D1D1D; -webkit-transition: all 0.4s ease-in-out;}#tabbed-toc .loading { display:block; padding:5px 15px; font:normal bold 11px Arial,Sans-Serif; color:#FFF;}#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li { margin:0; padding:0; list-style:none; }#tabbed-toc .toc-tabs { width: 24.8%; float: left !important;}#tabbed-toc .toc-tabs li a { display:block; font:normal bold 10px/28px Arial,Sans-Serif; height:28px; overflow:hidden; text-overflow:ellipsis; color:#ccc; text-transform:uppercase; text-decoration:none; padding:0 12px; cursor:pointer;  -webkit-transition: all 0.3s ease-in-out;}#tabbed-toc .toc-tabs li a:hover { background-color: #515050; color: #FFF; }
#tabbed-toc .toc-tabs li a.active-tab {
 background-color: #FFFC03;
 color: #222;
 position: relative;
 z-index: 5;
 margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
 width: 75%;
 float: right !important;
 background-color: #F5F5F5;
 border-left: 5px solid #FFFC03;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.3s ease-in-out;
}#tabbed-toc .divider-layer { float:none; display:block; position:absolute; top:0; right:0; bottom:0;}#tabbed-toc .panel { position:relative; z-index:5; font:normal normal 10px Arial,Sans-Serif;}#tabbed-toc .panel li a { display: block; position: relative; font-weight: bold; font-size: 11px; color: #222; line-height: 2.8em; height: 30px; padding: 0 10px; text-decoration: none; outline: none; overflow: hidden; -webkit-transition: all 0.3s ease-in-out;}#tabbed-toc .panel li time { display:block; font-style:italic; font-weight:400; font-size:10px; color:#666; float:right;}#tabbed-toc .panel li .summary { display:block; padding:10px 12px; font-style:italic; border-bottom:4px solid #275827; overflow:hidden;}#tabbed-toc .panel li .summary img.thumbnail { float:left; display:block; margin:0 8px 0 0; padding:4px; width:72px; height:72px; border:1px solid #dcdcdc; background-color:#fafafa;}#tabbed-toc .panel li:nth-child(even) { background-color: #DBDBDB; font-size: 10px;}#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a { background-color:#222; color:#FFF; outline:none; -webkit-transition: all 0.3s ease-in-out;}#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time { background-color:#222;}@media (max-width:700px) {#tabbed-toc { background-color:#fff; border:0 solid #888;}#tabbed-toc .toc-tabs,#tabbed-toc .toc-content { overflow:hidden; width:auto; float:none !important; display:block;}#tabbed-toc .toc-tabs li { display:inline; float:left !important;}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab { background-color:#222; color:#ccc;}#tabbed-toc .toc-tabs li a.active-tab { color:#000;}#tabbed-toc .toc-content { border:none;}#tabbed-toc .divider-layer,#tabbed-toc .panel li time { display:none;}}</style>

Widget 4 Code Customization

Loading Sitemap, Please Wait for a Moment...

• Replace it to anything you want, In order to change the message before the sitemap is loaded

http://whowantstuffs.blogspot.com

• Replace it with the URL of your blogger, don't add a forward slash. 
• If your using free Blosgspot domain and it's automatically redirect to your country Example: http://whowantstuffs.blogspot.in change the .in to .com, http://whowantstuffs.blogspot.com

background-color: #FFFC03; border-left: 5px solid #FFFC03;

• To change the yellow color of the widget, change the value in color the yellow..  

How To View Your New Sitemap Page?

1.) Go to LAYOUT >>> select ADD A GADGET >>> select PAGES >>> then check the SITEMAP (if you named it as SITEMAP)

2.) Don't forget to hit the SAVE button. Now open your blog and find your pages widget then click the SITEMAP.

Also Read: How To Add Scroll Bars on Blogger Blockquote | Add Elegant Page Loading Effect to Blogger | How To change the Favicon on Blogger | Create Rollover Image effect in Blogger | Automatically Add Image Border and Hover Effects To All Blogger Posts 

Final Words!

I hope that one of these 4 elegant sitemap widgets works in your blogger perfectly. If you have a problem installing with these widgets or the design of the widgets let me know, just write a comment below and we will discuss it. That's all guys keep on visiting! Happy Blogging!