How to add Table of Contents or Sitemap to blogger

1) Login to Blogger account

2) Go to Layout

3) Go to Add gadget

4) Go to HTML/Javascript

5) Copy the below code and paste it inside the content box and save it

<div dir="ltr" style="text-align: left;" trbidi="on">

<br /></div>

<style>

/* CSS Sitemap  by http://www.bloggerspice.com */

#table-outer table {width:100%;margin:0;padding:0;}

#table-outer input, #table-outer select {padding:4px;font:inherit;background:#fff;width:170px;box-sizing:border-box;border:none;color:#444;border:1px solid #eaeaea;transition:all 0.6s;}

#table-outer select {cursor:pointer;outline:none}

#table-outer input:focus{outline:none;background:#fff;border-color:#dadada;}

#resultDesc {margin-bottom:10px;}

#feedContainer {overflow:hidden;margin-top:20px;}

#feedContainer strong {font-size:10px;}

#feedContainer, #feedContainer li {padding:0;margin:0;list-style:none;}

#feedContainer li {float:left;width:50%;margin-bottom:5px;position:relative;z-index:0;}

#feedContainer .inner {display:block;height:72px;padding:10px;margin:5px 5px 0 5px;position:relative;background-color:#fff;box-shadow:0 0 0 1px #eaeaea;opacity:0.9;transition:all 0.6s;}

#feedContainer .inner:hover {opacity:1;box-shadow:0 0 0 1px #dadada;}

#feedContainer img {float:left;margin: 0 8px 0 0;max-width:100%;padding:1px;background:#ddd;}

#feedContainer .toc-title {max-height:33px;overflow:hidden;color:#444;font-weight:400;}

#feedContainer .toc-title:hover {color:#404040;}

#feedContainer .news-text {font-size:11px;display:none;}

#feedNav a, #feedNav span {display:block;text-align:center;color:#fff;

background-color:#444;padding:5px 0;width:100%;margin: 0 auto;margin-top:10px;transition:all 0.3s linear;}

#feedNav a:hover, #feedNav span:hover {background-color:#444;transition:all 0.3s linear;}

#feedContainer .date {display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px;}

#feedContainer .date .dd {font-size:9px;line-height:5px;font-weight:bold;}

#feedContainer .date span {display:inline-block;line-height:5px;text-align:center;

margin-left:5px;}

</style>

<div dir="ltr" style="text-align: left;" trbidi="on">

<div id="table-outer">

<table><tbody>

<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected value="published" />New post<option value="updated" />Post updated</select></td></tr>

<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected />Loading...</select></span></td></tr>

<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher">

<input type="text" /></form>

</td></tr>

</tbody></table>

</div>

<br />

<header id="resultDesc"></header><br /><br />

<ul id="feedContainer"></ul>

<div id="feedNav">

Loading...</div>

<script src="https://googledrive.com/host/0B3jgs-7rv9eUMUwwZTZZaWVxbms" type="text/javascript"></script>

</div>

or

1) Login to Blogger account

2) Go to Layout

3) Go to Pages

4) Add New Page

5) Go to HTML mode

6) Copy the below code and paste it inside the content box and save it

<div dir="ltr" style="text-align: left;" trbidi="on">

<br /></div>

<style>

/* CSS Sitemap  by http://www.bloggerspice.com */

#table-outer table {width:100%;margin:0;padding:0;}

#table-outer input, #table-outer select {padding:4px;font:inherit;background:#fff;width:170px;box-sizing:border-box;border:none;color:#444;border:1px solid #eaeaea;transition:all 0.6s;}

#table-outer select {cursor:pointer;outline:none}

#table-outer input:focus{outline:none;background:#fff;border-color:#dadada;}

#resultDesc {margin-bottom:10px;}

#feedContainer {overflow:hidden;margin-top:20px;}

#feedContainer strong {font-size:10px;}

#feedContainer, #feedContainer li {padding:0;margin:0;list-style:none;}

#feedContainer li {float:left;width:50%;margin-bottom:5px;position:relative;z-index:0;}

#feedContainer .inner {display:block;height:72px;padding:10px;margin:5px 5px 0 5px;position:relative;background-color:#fff;box-shadow:0 0 0 1px #eaeaea;opacity:0.9;transition:all 0.6s;}

#feedContainer .inner:hover {opacity:1;box-shadow:0 0 0 1px #dadada;}

#feedContainer img {float:left;margin: 0 8px 0 0;max-width:100%;padding:1px;background:#ddd;}

#feedContainer .toc-title {max-height:33px;overflow:hidden;color:#444;font-weight:400;}

#feedContainer .toc-title:hover {color:#404040;}

#feedContainer .news-text {font-size:11px;display:none;}

#feedNav a, #feedNav span {display:block;text-align:center;color:#fff;

background-color:#444;padding:5px 0;width:100%;margin: 0 auto;margin-top:10px;transition:all 0.3s linear;}

#feedNav a:hover, #feedNav span:hover {background-color:#444;transition:all 0.3s linear;}

#feedContainer .date {display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px;}

#feedContainer .date .dd {font-size:9px;line-height:5px;font-weight:bold;}

#feedContainer .date span {display:inline-block;line-height:5px;text-align:center;

margin-left:5px;}

</style>

<div dir="ltr" style="text-align: left;" trbidi="on">

<div id="table-outer">

<table><tbody>

<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected value="published" />New post<option value="updated" />Post updated</select></td></tr>

<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected />Loading...</select></span></td></tr>

<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher">

<input type="text" /></form>

</td></tr>

</tbody></table>

</div>

<br />

<header id="resultDesc"></header><br /><br />

<ul id="feedContainer"></ul>

<div id="feedNav">

Loading...</div>

<script src="https://googledrive.com/host/0B3jgs-7rv9eUMUwwZTZZaWVxbms" type="text/javascript"></script>

</div>