Oct 15, 2016

Tabbed Table of Contents HTML Sitemap Page Widget for Blogger

data:blog.title
How To Add Tabbed Table of Contents HTML Sitemap Page Widget to Blogger? - In previous, I've shared a specific label sitemap widget with a featured thumbnail for blogger blog, and now I'm again with another sitemap widget, but this one is entirely different from last ones. You can call it a table of contents widget for blogger because this BlogSpot gadget shows you all of your blog posts with different-different labels. You can see the screenshot below of the tabbed table of content sitemap widget for blogger, which I'm going to share today in this post.

table of content widget for blogger, blogger table of contents, HTML Sitemap Widget for Blogger Page

The live demo you can see on Sitemap Page.

A sitemap page is one of the musts having a page on your blog because there are many benefits of it like; It will help your visitors to navigate easily to each blog post under different categories they are interested in and after adding this widget your blog page views will be instantly increased day after day.

Not only page views but also a table of content widget helpful in SEO and assist you in decreasing the bounce rate of your blogger blog. A long time ago I added this widget, and now I can say without any doubt, the sitemap page is the most visited page of mine BlogSpot blog.

Recommended - 10+ Must Having Blogger Widgets for BlogSpot Blogs.

When a visitor comes to your blog and finds your content very useful, then they want to read more your articles and if you've added a table of content HTML sitemap page on your blog, then what else they need from your side? :)

Some of my readers ask me much time for this HTML sitemap widget, but I could not share because I'm busy in other stuff, but today going to share the exact code which I'm using on my blog to show a table of contents to all of you. :)

You Might Also Like - 

1 - 7 Powerful Tips To Increase Organic Traffic To A New Blog.
2 - Low CPC Adsense List 2016-2017 - Increase AdSense Earning

Credits -
+Tauffik Nurrohman who lives in Indonesia earlier shares the code I'm using in this table of contents widget. I owe him because he has done and shared a lot of free scripts for BlogSpot users.

Please note that I've not added any new function in this script code, but I've played with the CSS codes to make it eye-catchy and you can see this tabbed table of contents sitemap widget is too stylish in look and also fully mobile responsive design. You can also do this and share on your blog but after making changes in it. If you shared this widget without any changes, then I'll report on DMCA against you. Please respect hard work of developers. :)

Now follow below steps to add it to your Blogspot blog.

Steps To Adding Table Of Contents in Blogger


STEP #1] First of all you need to create a new page on your blogger blog and then switch post editor to HTML mode and make some changes in the Blogger post setting just like as below screenshot.

Create New Page, Table of Contents, Blogger HTML Sitemap Page Widget

STEP #2] When you switch post editor to HTML mode there you'll see two lines of code which is already added there by the default setting. Code will be like; <div dir="ltr" style="text-align: left;" trbidi="on"> </div> so you have to select that whole code and delete from your post editor.

STEP #3] Now copy and paste whole below code in HTML mode of Blogger post editor.

<style>
/*Table Of Contents Sitemap Widget for Blogger  */
#tabbed-toc {
 width: 99%;
 margin: 0 auto;
 overflow: hidden !important;
 position: relative;
 color: #222;
 border: 5px solid #222;
 border-bottom:10px solid blueviolet;
  border-top:10px solid #222;
   border-right:5px solid blueviolet;
 background-color:blueviolet;
 -webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
 display:block;
 padding:5px 15px;
 font:normal bold 14px Arial,Sans-Serif;
 color:#FFF;
  text-align:center;
 margin:0 auto!important;
}
#tabbed-toc li {
 margin:0;
 padding:0;
 list-style-type:none!important;
  background:none;
 }
#tabbed-toc ul{
 margin:0;
 padding:0;
 list-style:none!important;
  background:none;
 }
#tabbed-toc ol li:before{content:none;}
#tabbed-toc ol{
 margin:0;
  margin-left:10px;
 padding:0;
  background:blueviolet;
  color:#fff!important;
  list-style:none!important;}
#tabbed-toc .toc-tabs {
 width: 24.8%;
 float: left !important;
}
#tabbed-toc .toc-tabs li a {
 display:block;
 font:normal bold 13px/28px Arial,Sans-Serif;
 height:30px;
 overflow:hidden;
 text-overflow:ellipsis;
 color:#fff;
 text-transform:uppercase;
 text-decoration:none;
 padding:0 13px;
 cursor:pointer;
  -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
 background-color: #555;
 color: #FFF!important;
 }
#tabbed-toc .toc-tabs li a.active-tab {
 background-color: black;
 color: #fff;
 position: relative;
 z-index: 5;
 margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
 width: 75%;
 float: right !important;
 background-color: #999!important;
 border-left: 5px solid #222;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.7s ease-in-out;
}
#tabbed-toc .divider-layer {
 float:none;
 display:block;
 position:absolute;
 top:0; right:0; bottom:0;
}
#tabbed-toc .panel {
 position:relative;
 z-index:5;
 font:normal normal 14px Arial,Sans-Serif;
 width:100%;
  margin-left:0px;
}
#tabbed-toc .panel li a {
 display: block;
 position: relative;
 font-weight: bold;
 font-size: 12px;
 color: #fff;
 line-height: 2.8em;
 height: 30px;
 padding: 0 10px;
 text-decoration: none;
 outline: none;
 overflow: hidden;
  text-align:center;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li:nth-child(odd) {
 background:#606592;background:linear-gradient(135deg, #999 0%,#999 10%,#666 50%,#666 50%);
 font-size: 13px!important;
}
#tabbed-toc .panel li:nth-child(even){
 background:#909090;background:linear-gradient(135deg, #666 50%,#666 60%,#999 100%,#999 0%);
 font-size: 13px!important;
}
#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:4px solid #275827;
 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 a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
 background-color:blueviolet;
 color:#FFF;
 outline:none;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
 background-color:#0c6aff;
}
@media (max-width:700px) {
#tabbed-toc {
 background-color:#fff;
 border:0 solid blueviolet;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
 overflow:hidden;
 width:auto;
 float:none !important;
 display:block;
}
#tabbed-toc .toc-tabs li {
 display:inline;
 float:left !important;
list-style:none!important;
    margin:0 auto!important;
  width:100%;
  text-align:center;
}
#tabbed-toc .toc-tabs li a {
 background-color:#222;
 color:#fff!important;
 font-size:11px;
  border:1px solid blueviolet;
}
#tabbed-toc .toc-tabs li a.active-tab {
 background-color:blueviolet;
 color:#fff;
}
#tabbed-toc .toc-tabs li a.active-tab {
 color:#000;
}
#tabbed-toc .toc-content {
 border:none;
  margin-top:0px;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>
<div id="tabbed-toc">
<span class="loading">Please Wait! Sitemap is loading...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://www.mybloggerguides.com", // Enter your blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Default thumbnail size
    noThumb: "", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window. `false` to open in same window
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts or
 //define how many recent posts are to be marked by changing the number
    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for
//the "New!" text
};
</script>
<script type="text/javascript">
var tabbedTOC_defaults={blogUrl:"http://www.dte.web.id",containerId:"tabbed-toc",activeTab:1,showDates:false,showSummaries:false,numChars:200,showThumbnails:false,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>Baru!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=(typeof(tabbedTOC[i])!==undefined&&typeof(tabbedTOC[i])!=='undefined')?tabbedTOC[i]:tabbedTOC_defaults[i];}
function clickTab(pos){var a=document.getElementById(tabbedTOC_defaults.containerId),b=a.getElementsByTagName('ol'),c=a.getElementsByTagName('ul')[0],d=c.getElementsByTagName('a');for(var t=0;t<b.length;t++){b[t].style.display="none";b[parseInt(pos,10)].style.display="block";}
for(var u=0;u<d.length;u++){d[u].className="";d[parseInt(pos,10)].className="active-tab";}}
function showTabs(json){var total=parseInt(json.feed.openSearch$totalResults.$t,10),c=tabbedTOC_defaults,entry=json.feed.entry,category=json.feed.category,skeleton="",newPosts=[];for(var g=0;g<(c.showNew===true?5:c.showNew);g++){if(g==entry.length)break;entry[g].title.$t=entry[g].title.$t+(c.showNew!==false?c.newText:'');}
entry=c.sortAlphabetically?entry.sort(function(a,b){return(a.title.$t.localeCompare(b.title.$t));}):entry;category=c.sortAlphabetically?category.sort(function(a,b){return(a.term.localeCompare(b.term));}):category;skeleton='<span class="divider-layer"></span><ul class="toc-tabs">';for(var h=0,cen=category.length;h<cen;h++){skeleton+='<li class="toc-tab-item-'+h+'"><a href="javascript:clickTab('+h+');">'+category[h].term+'</a></li>';}
skeleton+='</ul>';skeleton+='<div class="toc-content">';for(var i=0,cnt=category.length;i<cnt;i++){skeleton+='<ol class="panel" data-category="'+category[i].term+'"';skeleton+=(i!=(c.activeTab-1))?' style="display:none;"':'';skeleton+='>';for(var j=0;j<total;j++){if(j==entry.length)break;var link,entries=entry[j],pub=entries.published.$t,month=c.monthNames,title=entries.title.$t,summary=("summary"in entries&&c.showSummaries===true)?entries.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,c.numChars)+'&hellip;':'',img=("media$thumbnail"in entries&&c.showThumbnails===true)?'<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="'+entries.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="'+c.noThumb.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/")+'"/>',cat=(entries.category)?entries.category:[],date=(c.showDates)?'<time datetime="'+pub+'" title="'+pub+'">'+pub.substring(8,10)+' '+month[parseInt(pub.substring(5,7),10)-1]+' '+pub.substring(0,4)+'</time>':'';for(var k=0;k<entries.link.length;k++){if(entries.link[k].rel=='alternate'){link=entries.link[k].href;break;}}
for(var l=0,check=cat.length;l<check;l++){var target=(c.newTabLink)?' target="_blank"':'';if(cat[l].term==category[i].term){skeleton+='<li title="'+cat[l].term+'"';skeleton+=(c.showSummaries)?' class="bold"':'';skeleton+='><a href="'+link+'"'+target+'>'+title+date+'</a>';skeleton+=(c.showSummaries)?'<span class="summary">'+img+summary+'<span style="display:block;clear:both;"></span></span>':'';skeleton+='</li>';}}}
skeleton+='</ol>';}
skeleton+='</div>';skeleton+='<div style="clear:both;"></div>';document.getElementById(c.containerId).innerHTML=skeleton;clickTab(c.activeTab-1);}
(function(){var h=document.getElementsByTagName('head')[0],s=document.createElement('script');s.type='text/javascript';s.src=tabbedTOC_defaults.blogUrl+'/feeds/posts/summary?alt=json-in-script&max-results='+tabbedTOC_defaults.maxResults+'&orderby=published&callback=showTabs';if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){h.appendChild(s);},tabbedTOC_defaults.preload);}else{window.onload=function(){h.appendChild(s);};}})();</script>

STEP #4] Now change http://www.mybloggerguides.com with your Blog URL and hit on publish button.

That's it.

Optional - Hiding Specific Labels from Table of Content

This step is for those who want to show only selected labels in the table of contents widget. Actually this script automatically fetchs all labels and show all the the content your blog have. You can't stop showing unwanted labels or show only selected labels with the script. As I've already said, It will generate all labels of your blog and show them in table of content page.

Many of us have large numbers of labels in the blog and they want to hide some labels from table of content page. So I've a simple and easy to follow solution to hide unwanted labels and show only which you want in TOC page. Follow guide below.

STEP #1 - Selecting The Labels to Hide from TOC Page
First you've to visit your just published sitemap page. After loading the sitemap, You'll see the all labels listed and sorted alphabatically in left side on sitemap page.

Now start counting your labels. :) I'm not joking, you've to count if you want to hide. ;)

Generally counting start from 1 but you've to count from ZERO. I mean to say, If you've 100 labels in your blog then your first label starts from 0 and last one is at 99 number. So you have to count from ZERO. For example -

STEP #2 - Adding the Number of  Labels in CSS classes to Hide
Now If you've noted all the numbers of label which you want to hide then add those numbers to .toc-tab-item-Label-Number CSS class just like below example.

<style>
.toc-tab-item-0, .toc-tab-item-2, .toc-tab-item-7, .toc-tab-item-8 { display: none !important; }
</style>

In the above CSS style code, I've added label number 1, 3, 8, and 9 (Remembering the count from ZERO=1). Follow above example and add all the label numbers which you want to hide from your blog sitemap page.

After adding all CSS classes in <style>..</style> tag , Go back to sitemap page and click on edit link and add this new code just like as before. Now click on update button and open sitemap page to see the result.

That's it. Enjoy:)

Don't Ignore -

1 - How To Get Google to Index New Blog Post in 1 Minute?
2 - How To Improve Google Search Ranking and Get Higher Rank?

Conclusion:

So above guide is about "How To Add Tabbed Table of Contents HTML Sitemap Page Widget to Blogger Blog?" I've tried my enough to make it easy and simple as I can. I hope it is quite easy to understand for newbies too.

If you're facing any problem or you need any help then let me know. I'll help out of sure and will be happy to assist you guys.

Now it;s yourn turn to give me your valuable feedback about this Table of Contents widget. our feedback is much appreciated.

Support us by share this widget with your frineds on social media platforms. Don't forget to subscribe us to get latest updates direct into your mailbox for free.

Thank You!
Stay Blessed and Stay Happy!

Search Tags: table of contents widget for blogger, blogger toc widget, blogger table of content, table of content page for blogger, create sitemap for all labels, Add html sitemap page to blogger, blogger html sitemap page, tabbed table of content widget for blogger, blogspot html sitemap page widget.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.