How to Make Table of Contents Based on Labels, Beautiful & Unique

A blog's table of contents or also known as a sitemap can be an important factor in making your site easier to navigate and access. No, I'm not talking about the Google XML sitemap that you submit directly to Google. I'm talking about an actual page on your site that has a list of all your blog posts.

Before we get into the step by step tutorial, let me briefly explain what is a table of contents or sitemap on the blog below:

What is a Sitemap?
Table of Contents is a set of xml Sitemap files containing a list of URLs for a specific website. A sitemap is a protocol that allows webmasters to notify search engines about the URLs available on the site and for crawling. Sitemaps can be created for posts, pages, labels and archives on a blog. But I'm going to focus on how to create a sitemap for a specific label on a blogger blog.

What is the Difference Between XML and HTML Sitemaps
XML sitemaps are written or created in the XML markup language preferred by search engines. You can submit an XML sitemap of your site to webmaster tools to improve and control the rate at which search engines crawl your site.

HTML sitemaps on the other hand are supposed to be directed towards actual website visitors. It is written or generated in plain HTML, and usually lists all the pages / posts available on your website.
Now that you know the differences, let's add an HTML sitemap page to the blog.,

Creating a table of contents on a blog based on labels is very easy and very short. You just need to add CSS to your Blogger static page, but what you need to pay attention to is to choose the type of display that doesn't overload your template.

Below is a screenshot of the table of contents view by Label.

First

Please open blogger> Page> Then click New page

Second

Add the code below to the HTML tab

<style type="text/css">
.toc-blogger{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.toc-blogger .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.toc-blogger .toc-header:hover{background-color:#fdfdfd}
.toc-blogger .toc-header:before{content: "";margin-right: 8px;font-weight: normal;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z' fill='%23222'/%3E%3C/svg%3E");width: 17px;height: 17px;display: inline-block;margin-bottom: -4px;}
.toc-blogger .toc-header:after{content: "";float: right;font-weight: normal;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,9L15.5,6.5L16.92,7.92L12,12.84L7.08,7.92L8.5,6.5L11,9V3H13V9M3,15H21V17H3V15M3,19H13V21H3V19Z' fill='%23222'/%3E%3C/svg%3E");width: 17px;height: 17px;display: inline-block;margin-bottom: -4px;}
.toc-blogger .toc-header.active{color:#039be5;}
.toc-blogger .toc-header.active:after{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.toc-blogger .toc-header.active:before{content: "";margin-right: 8px;font-weight: normal;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z' fill='%23222'/%3E%3C/svg%3E");width: 17px;height: 17px;display: inline-block;margin-bottom: -4px;}
.toc-blogger .toc-loading{display:block;padding:15px;text-decoration:blink}
.toc-blogger ol{margin:0;padding:0;list-style:none;transition:initial}
.toc-blogger li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 40px!important;white-space:normal;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.toc-blogger a:before{content: "";margin-right: 8px;font-weight: normal;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19,15L13,21L11.58,19.58L15.17,16H4V4H6V14H15.17L11.58,10.42L13,9L19,15Z' fill='%23d9d9d9'/%3E%3C/svg%3E"); width: 17px;height: 17px;display: inline-block;margin-bottom:-4px;}
.toc-blogger a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial;margin-left:-25px}
.toc-blogger a:visited{color:#a2a2a9;transition:initial}
.toc-blogger a:hover,.toc-blogger a:visited:hover{color:#039be5;text-decoration:none;transition:initial}
.post ol li:before{display:none}
.newtext{font-weight:normal;font-style:normal;color:white;font-size:11px;background:#039be5;padding:0px 6px 2px 6px;line-height:normal;float:right;border-radius:50px;}
</style>
<div class="toc-blogger" id="toc-blogger-by-gurudzgn">
<span class="toc-loading">Loading Content...</span></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
//<![CDATA[
//by www.cssblogspot.com
var url_kalian='https://www.cssblogspot.com/'; //No space support
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('10 11=["\\2\\7\\5\\i\\n\\3\\7\\c\\c\\0\\9\\i\\n\\o\\i\\c\\d\\9\\d\\8\\D\\c\\6","\\j\\8\\a\\p\\r\\5\\3\\1\\4\\4\\e\\s\\6\\0\\f\\2\\0\\t\\2\\s\\k\\6\\0\\f\\j\\l\\8\\a\\p\\k","\\H\\2\\7\\5","\\5\\7\\6\\2\\1\\a\\6\\0\\9\\I\\8","\\c\\0\\2\\A\\3\\0\\g\\0\\6\\2\\J\\o\\I\\8","\\b\\0\\1\\8","\\c\\0\\2\\A\\3\\0\\g\\0\\6\\2\\4\\J\\o\\E\\1\\c\\F\\1\\g\\0","\\w\\4\\7\\6\\q\\1\\3\\3\\n\\1\\5\\u","\\0\\6\\2\\9\\o","\\B\\0\\0\\8","\\5\\1\\2\\0\\c\\7\\9\\o","","\\3\\0\\6\\c\\2\\b","\\2\\0\\9\\g","\\h\\d\\4\\b","\\4\\b\\7\\f\\F\\0\\f","\\12\\2","\\2\\a\\2\\3\\0","\\r\\x\\6\\0\\f\\x","\\2\\b\\0\\K\\a\\4\\2","\\4\\7\\9\\2\\y\\3\\h\\b\\1\\n\\0\\2\\a\\5\\1\\3\\3\\o","\\3\\7\\5\\1\\3\\0\\q\\7\\g\\h\\1\\9\\0","\\4\\7\\9\\2","\\2\\b\\0\\C\\1\\6\\0\\3","\\j\\b\\L\\r\\5\\3\\1\\4\\4\\e\\s\\2\\7\\5\\i\\b\\0\\1\\8\\0\\9\\s\\k","\\j\\l\\b\\L\\k","\\j\\8\\a\\p\\r\\5\\3\\1\\4\\4\\e\\s\\2\\7\\5\\i\\5\\7\\6\\2\\0\\6\\2\\s\\k\\j\\7\\3\\k","\\3\\a\\6\\u","\\1\\3\\2\\0\\9\\6\\1\\2\\0","\\9\\0\\3","\\b\\9\\0\\B","\\j\\3\\a\\k\\j\\1\\r\\b\\9\\0\\B\\e\\s","\\s\\k","\\9\\0\\h\\3\\1\\5\\0","\\j\\l\\1\\k","\\g\\1\\2\\5\\b","\\r","\\6\\0\\f\\E\\0\\t\\2","\\j\\l\\3\\a\\k","\\j\\l\\7\\3\\k\\j\\l\\8\\a\\p\\k","\\a\\6\\6\\0\\9\\M\\E\\13\\K","\\d\\6\\8\\0\\B\\a\\6\\0\\8","\\b\\a\\8\\0","\\R","\\r\\z\\2\\7\\5\\i\\5\\7\\6\\2\\0\\6\\2","\\8\\7\\f\\6","\\4\\3\\a\\8\\0\\S\\h\\0\\0\\8","\\4\\3\\a\\8\\0\\A\\1\\4\\a\\6\\c","\\4\\3\\a\\8\\0\\q\\1\\3\\3\\n\\1\\5\\u","\\4\\3\\a\\8\\0\\T\\7\\f\\6","\\6\\0\\t\\2","\\1\\5\\2\\a\\p\\0","\\1\\8\\8\\q\\3\\1\\4\\4","\\1\\5\\2\\a\\p\\0\\C\\1\\6\\0\\3","\\0\\N","\\b\\1\\4\\q\\3\\1\\4\\4","\\5\\3\\a\\5\\u\\q\\1\\3\\3\\n\\1\\5\\u","\\d\\h","\\4\\3\\a\\8\\0\\U\\h","\\9\\0\\g\\7\\p\\0\\q\\3\\1\\4\\4","\\r\\z\\2\\7\\5\\i\\b\\0\\1\\8\\0\\9","\\5\\3\\a\\5\\u","\\4\\5\\9\\a\\h\\2","\\5\\9\\0\\1\\2\\0\\A\\3\\0\\g\\0\\6\\2","\\4\\9\\5","\\d\\9\\3","\\l\\B\\0\\0\\8\\4\\l\\h\\7\\4\\2\\4\\l\\4\\d\\g\\g\\1\\9\\o\\V\\1\\3\\2\\e\\w\\4\\7\\6\\i\\a\\6\\i\\4\\5\\9\\a\\h\\2\\m\\g\\1\\t\\i\\9\\0\\4\\d\\3\\2\\4\\e","\\g\\1\\t\\O\\0\\4\\d\\3\\2\\4","\\m\\5\\1\\3\\3\\n\\1\\5\\u\\e","\\7\\6\\3\\7\\1\\8","\\8\\0\\3\\1\\o\\K\\7\\1\\8\\a\\6\\c","\\1\\h\\h\\0\\6\\8\\q\\b\\a\\3\\8","\\4\\0\\2\\E\\a\\g\\0\\7\\d\\2","\\p\\1\\3","\\R\\2\\7\\5\\i\\n\\3\\7\\c\\c\\0\\9\\i\\n\\o\\i\\c\\d\\9\\d\\8\\D\\c\\6","\\3\\7\\5\\1\\2\\a\\7\\6","\\b\\2\\2\\h\\4\\14\\l\\l\\f\\f\\f\\z\\c\\7\\7\\c\\3\\0\\z\\5\\7\\g\\l\\d\\9\\3\\V\\4\\1\\e\\2\\m\\9\\5\\2\\e\\w\\m\\N\\e\\m\\0\\4\\9\\5\\e\\4\\m\\4\\7\\d\\9\\5\\0\\e\\f\\0\\n\\m\\5\\8\\e\\v\\m\\5\\1\\8\\e\\9\\w\\1\\m\\d\\1\\5\\2\\e\\P\\m\\p\\0\\8\\e\\v\\1\\b\\U\\W\\A\\f\\a\\C\\15\\P\\C\\F\\t\\8\\6\\7\\y\\b\\X\\F\\5\\6\\Q\\W\\M\\1\\16\\H\\T\\t\\5\\Y\\G\\w\\y\\J\\0\\c\\Y\\I\\q\\O\\y\\q\\m\\d\\9\\3\\e\\b\\2\\2\\h\\4\\x\\L\\y\\x\\v\\G\\x\\v\\G\\f\\f\\f\\z\\c\\d\\9\\d\\8\\D\\c\\6\\z\\5\\7\\g\\x\\v\\G\\m\\d\\4\\c\\e\\y\\17\\p\\Z\\1\\f\\Q\\g\\w\\H\\5\\18\\D\\M\\O\\v\\n\\v\\8\\b\\S\\Q\\Z\\N\\P\\X\\C\\19","\\9\\0\\1\\8\\o"]',62,72,'x65|x61|x74|x6C|x73|x63|x6E|x6F|x64|x72|x69|x68|x67|x75|x3D|x77|x6D|x70|x2D|x3C|x3E|x2F|x26|x62|x79|x76|x43|x20|x22|x78|x6B|x32|x6A|x25|x41|x2E|x45|x66|x50|x7A|x54|x4E|x46|x5F|x49|x42|x4C|x33|x48|x71|x52|x38|x30|x23|x53|x44|x55|x3F|x4B|x58|x51|x56|var|_0x1832|x24|x4D|x3A|x34|x39|x4F|x35|x36'.split('|'),0,{}));var toc_config={url:url_kalian,containerId:_0x1832[0],showNew:15,newText:_0x1832[1],sortAlphabetically:{thePanel:true,theList:true},maxResults:9999,activePanel:1,slideSpeed:{down:400,up:400},slideEasing:{down:null,up:null},slideCallback:{down:function(){},up:function(){}},clickCallback:function(){},jsonCallback:_0x1832[2],delayLoading:0};!function(_0x3fd6x2,_0x3fd6x3){var _0x3fd6x4=_0x3fd6x3[_0x1832[4]](toc_config[_0x1832[3]]),_0x3fd6x5=_0x3fd6x3[_0x1832[6]](_0x1832[5])[0],_0x3fd6x6=[];_0x3fd6x2[toc_config[_0x1832[7]]]= function(_0x3fd6x2){for(var _0x3fd6x3,_0x3fd6x5,_0x3fd6x7=_0x3fd6x2[_0x1832[9]][_0x1832[8]],_0x3fd6x8=_0x3fd6x2[_0x1832[9]][_0x1832[10]],_0x3fd6x9=_0x1832[11],_0x3fd6xa=0,_0x3fd6xb=_0x3fd6x8[_0x1832[12]];_0x3fd6xb> _0x3fd6xa;++_0x3fd6xa){_0x3fd6x6[_0x1832[14]](_0x3fd6x8[_0x3fd6xa][_0x1832[13]])};for(var _0x3fd6xc=0,_0x3fd6xd=_0x3fd6x7[_0x1832[12]];_0x3fd6xd> _0x3fd6xc;++_0x3fd6xc){(toc_config[_0x1832[15]]|| toc_config[_0x1832[15]]> 0)&& _0x3fd6xc< toc_config[_0x1832[15]]+ 1&& (_0x3fd6x7[_0x3fd6xc][_0x1832[17]][_0x1832[16]]+= _0x1832[18])};_0x3fd6x7= toc_config[_0x1832[20]][_0x1832[19]]?_0x3fd6x7[_0x1832[22]](function(_0x3fd6x2,_0x3fd6x3){return _0x3fd6x2[_0x1832[17]][_0x1832[16]][_0x1832[21]](_0x3fd6x3[_0x1832[17]].$t)}):_0x3fd6x7,toc_config[_0x1832[20]][_0x1832[23]]&& _0x3fd6x6[_0x1832[22]]();for(var _0x3fd6xe=0,_0x3fd6xf=_0x3fd6x6[_0x1832[12]];_0x3fd6xf> _0x3fd6xe;++_0x3fd6xe){_0x3fd6x9+= _0x1832[24]+ _0x3fd6x6[_0x3fd6xe]+ _0x1832[25],_0x3fd6x9+= _0x1832[26];for(var _0x3fd6x10=0,_0x3fd6x11=_0x3fd6x7[_0x1832[12]];_0x3fd6x11> _0x3fd6x10;++_0x3fd6x10){_0x3fd6x3= _0x3fd6x7[_0x3fd6x10][_0x1832[17]][_0x1832[16]];for(var _0x3fd6x12=0,_0x3fd6x13=_0x3fd6x7[_0x3fd6x10][_0x1832[27]][_0x1832[12]];_0x3fd6x13> _0x3fd6x12;++_0x3fd6x12){if(_0x1832[28]== _0x3fd6x7[_0x3fd6x10][_0x1832[27]][_0x3fd6x12][_0x1832[29]]){_0x3fd6x5= _0x3fd6x7[_0x3fd6x10][_0x1832[27]][_0x3fd6x12][_0x1832[30]];break}};for(var _0x3fd6x14=0,_0x3fd6x15=_0x3fd6x7[_0x3fd6x10][_0x1832[10]][_0x1832[12]];_0x3fd6x15> _0x3fd6x14;++_0x3fd6x14){_0x3fd6x6[_0x3fd6xe]== _0x3fd6x7[_0x3fd6x10][_0x1832[10]][_0x3fd6x14][_0x1832[13]]&& (_0x3fd6x9+= _0x1832[31]+ _0x3fd6x5+ _0x1832[32]+ _0x3fd6x3[_0x1832[33]](/ \%new\%$/,_0x1832[11])+ _0x1832[34]+ (_0x3fd6x3[_0x1832[35]](/\%new\%/)?_0x1832[36]+ toc_config[_0x1832[37]]:_0x1832[11])+ _0x1832[38])}};_0x3fd6x9+= _0x1832[39]};_0x3fd6x4[_0x1832[40]]= _0x3fd6x9,_0x1832[41]!=  typeof jQuery&& ($(_0x1832[43]+ toc_config[_0x1832[3]]+ _0x1832[44])[_0x1832[42]](),$(_0x1832[43]+ toc_config[_0x1832[3]]+ _0x1832[60])[_0x1832[61]](function(){$(this)[_0x1832[55]](_0x1832[51])|| (toc_config[_0x1832[56]](this),$(_0x1832[43]+ toc_config[_0x1832[3]]+ _0x1832[60])[_0x1832[59]](_0x1832[51])[_0x1832[50]]()[_0x1832[58]](toc_config[_0x1832[46]][_0x1832[57]],toc_config[_0x1832[47]][_0x1832[57]],toc_config[_0x1832[48]][_0x1832[57]]),$(this)[_0x1832[52]](_0x1832[51])[_0x1832[50]]()[_0x1832[49]](toc_config[_0x1832[46]][_0x1832[45]],toc_config[_0x1832[47]][_0x1832[45]],toc_config[_0x1832[48]][_0x1832[45]]))})[_0x1832[54]](toc_config[_0x1832[53]]- 1)[_0x1832[52]](_0x1832[51])[_0x1832[50]]()[_0x1832[49]](toc_config[_0x1832[46]][_0x1832[45]],toc_config[_0x1832[47]][_0x1832[45]],toc_config[_0x1832[48]][_0x1832[45]]))};var _0x3fd6x7=_0x3fd6x3[_0x1832[63]](_0x1832[62]);_0x3fd6x7[_0x1832[64]]= toc_config[_0x1832[65]][_0x1832[33]](/\/$/,_0x1832[11])+ _0x1832[66]+ toc_config[_0x1832[67]]+ _0x1832[68]+ toc_config[_0x1832[7]],_0x1832[69]== toc_config[_0x1832[70]]?_0x3fd6x2[_0x1832[69]]= function(){_0x3fd6x5[_0x1832[71]](_0x3fd6x7)}:_0x3fd6x2[_0x1832[72]](function(){_0x3fd6x5[_0x1832[71]](_0x3fd6x7)},toc_config[_0x1832[70]])}(window,document);$(document)[_0x1832[77]](function(){var _0x3fd6x16=$(_0x1832[74])[_0x1832[73]]();if(_0x3fd6x16== null){window[_0x1832[75]][_0x1832[30]]= _0x1832[76]}})
//]]>
</script>