How to add stylish responsive Table of content in Blogger?

We can show all our blog posts till date in one page just like how we make a table of content in any report. We also call it as Table of Content in blogging context. This will make navigation across our blogs more easy and engaging. Though Blogger have a default gadget for it, we always love to have something better.

                    
I have already shared a post on how to do this in your blog. That wasn't responsive and moreover not much stylish. Some bloggers may love to add styles to their blogs and on adding Table of Content can't be exceptional.

You may also love:  

• How to add HTML Box in a Blogger Post?
• How to remove Navbar from a Blog?
• How to disable Magazine style design in Blogger Template?

New Blogging Tips & Tricks has developed this tool for us. We can just directly implement in our blog. I will guide in have it implemented well and also may be some ideas to customize it. The HTML for this is given below:

<div id="tabbed-toc"><span class="loading">Loading...</span></div><script type="text/javascript">var tabbedTOC = {blogUrl:"YOUR BLOG URL", containerId: "tabbed-toc", activeTab: 1};</script>
<style>#tabbed-toc{margin:0 auto;background-color:#fff;position:relative;color:#333}#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;color:#fff}#tabbed-toc li,#tabbed-toc ol,#tabbed-toc ul{margin:0;padding:0;list-style:none}#tabbed-toc .toc-tabs{width:2%;float:left}#tabbed-toc .toc-tabs li a{display:block;overflow:hidden;text-overflow:ellipsis;color:#000;text-decoration:none;padding:9px;cursor:pointer}#tabbed-toc .toc-tabs li a:hover{background-color:#D85252;color:#fff}#tabbed-toc .toc-tabs li a.active-tab{background-color:#343434;color:#fff;position:relative;z-index:5;margin:0 -1px 0 0}#tabbed-toc .divider-layer,#tabbed-toc .toc-content{width:80%;float:right;background-color:#fff;border-left:5px solid #343434;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}#tabbed-toc .panel{position:relative;z-index:5}#tabbed-toc .panel li a{display:block;position:relative;font-size:15px;color:#000;line-height:20px;padding:12px;text-decoration:none;outline:0;overflow:visible}#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:2px solid #888;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:#eee}#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:hover time{text-decoration:underline;outline:0}@media (max-width:700px){#tabbed-toc .toc-content,#tabbed-toc .toc-tabs{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc .toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{border:1px solid #eee}#tabbed-toc .toc-tabs li a.active-tab{background-color:#343434;color:#fff}#tabbed-toc .toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>
<script src="https://blogeutectics.googlecode.com/svn/trunk/Sitemap-eutecticsV4.js"></script>

Let us now install in your blog. Follow the given steps:

1. Login to your blog
2. Select the blog (if have many)
3. Click on Pages
4. Click on New Page
5. Give Page Title (may be table of content)
6. Select HTML, not Compose
7. Copy the above code
8. And paste in it

You may then replace YOUR BLOG URL with url address of your blog and then click on Publish Button on the top right side of your page content. You're done. It's being added into your blog. Hope you love it. Keep blogging!