How to

How to Create a Cool Table of Contents in Blogger

how to create a cool table of contents in Blogger. Table of Contents is a list of articles that exist on a blog or website by providing internal links on all specific article pages, with a table of contents it will make it easier for visitors to find what a visitor needs on your blog.

How to Create a Cool Table of Contents on Blogger
How to Create a Cool Table of Contents in Blogger

But of course if done manually which means that every time you make a new article you also have to update the table of contents on the blog, then it will be very boring and also takes time even though it’s not long.
How to Create a Cool Table of Contents in Blogger Log into Blogger > Create a new post on the Page menu > Add all the codes below in the post on the HTML tab (Not Compose)

<div class="tabbed-toc" id="tabbed-toc"></div>
<script>
var tabbedTOC={blogUrl:"
https://indzign.blogspot.com/",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:' – New'};
</script>
<script src="https://rawcdn.githack.com/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 it blog URL: “https://indzign.blogspot.com/“with your blog address. Click Publish and finish.

Check DEMO
Easy enough right? How to Create a Cool Table of Contents in Blogger.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close