Skip to content Skip to sidebar Skip to footer

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



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>
Third
Save

and see the result

1 comment for "How to Make Table of Contents Based on Labels, Beautiful & Unique"