How To Add Automatic (sitemap) Table Of Contents In Blogger/Blogspot Post/Page

How To Add Automatic Table Of Contents In Google Blogger/Blogspot Post/Page ...

How to Make a Cool Table of Contents on Blogger

This time, IndianCreator will share tips on How to Make a Cool Table of Contents on Blogger. Table of Contents is a list of articles that are on a blog or website by providing internal links on all pages of a particular article, with a table of contents it will make it easier for a visitor to find what is needed  a visitor to your blog.

But of course if done manually which means that every time you create a new article you also have to update the contents page on the blog, then it will be very boring and also takes time even though it is not long.

How To Add Automatic Table Of Contents In Google Blogger/Blogspot Post/Page

How to Make a Cool Table of Contents on Blogger

»Login to Blogger

»Create a new post on the Page menu

»Add all the code below in the post on the HTML tab (Not Compose)

<div class="tabbed-toc" id="tabbed-toc"></div> <script> var tabbedTOC={blogUrl:"https://www.indiancreator.in/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:red;">New</em>'}; </script> <script src="https://cdn.jsdelivr.net/gh/Indzign/InSEO@master/daftarisikeren.js"></script> <style scoped="" type="text/css"> .tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite} .tabbed-toc .loading{display:block;padding:2px 12px;color:#fff} .tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none} .tabbed-toc .toc-tabs{width:20%;float:left} .tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s} .tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)} .tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0} .tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box} .tabbed-toc .toc-line{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{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden} .tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right} .tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px} .tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa} .tabbed-toc .panel li{background-color:#f9f9f9;margin:0} .tabbed-toc .panel li:nth-child(even){background-color:#fff} .tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none} .tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px} .tabbed-toc .panel li:before{display:none} @-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}} </style>

   

After that, replace blogUrl: "https://www.indiancreator.in" with your blog address...

Click Publish and finish...

Download file Result

Searches related to How To Add Table Of Contents In Blogger/Blogspot Post

● how to add automatic table of contents in google blogger

● table of contents template for blogger

● table of contents for blogger

● table of contents in blog post

● html table of contents

● blogger table of contents widget

● how to add table in blogger

● easy table of contents