Table of Contents is what every blogger likes to add to his blog. It helps in decreasing the bounce rate of the blog and increasing the pageviews.
Today I am going to show you how you can add an amazing Table of Contents widget to a page of your blog. This widget is made by Taufik Nurrohman of DTE. The concept of this widget is very simple. It is coded with the help of JavaScript and CSS. It also has many options and setting which I will describe below.
A live working demo of this widget can be seen by clicking the below button.
Live Demo
After seeing the demo if you wish to add this widget in your blog then follow the below steps.
First of all we need to create a new page and to do this firstly go to Blog Title → Pages → New Page → Blank Page. Page editor will open, now click on HTML tab.
Once you are in the HTML tab of Page Editor add the below code in it.
Copy and paste the above given code in the post editor.
Now change the URL in the blogUrl field. You may change other settings. It is briefly described in the code what they are and how to change them. After making the changes save the page.
You are done now. Now you can link the page wherever you want. You and your visitors may now see this amazing table of content in your blogger blog.
Today I am going to show you how you can add an amazing Table of Contents widget to a page of your blog. This widget is made by Taufik Nurrohman of DTE. The concept of this widget is very simple. It is coded with the help of JavaScript and CSS. It also has many options and setting which I will describe below.
A live working demo of this widget can be seen by clicking the below button.
Live Demo
After seeing the demo if you wish to add this widget in your blog then follow the below steps.
Step 1 : Creating a New Page
First of all we need to create a new page and to do this firstly go to Blog Title → Pages → New Page → Blank Page. Page editor will open, now click on HTML tab.
Step 2 : Adding the code
Once you are in the HTML tab of Page Editor add the below code in it.
<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.allbloggertricks.com/" title="Tabbed TOC">All Blogger Tricks</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://your-url.blogspot.com", // 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, // Thumbnail size
noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // 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?
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
newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script type="text/javascript" src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>
Copy and paste the above given code in the post editor.
Step 3 : Table of Content Settings
Now change the URL in the blogUrl field. You may change other settings. It is briefly described in the code what they are and how to change them. After making the changes save the page.
You are done now. Now you can link the page wherever you want. You and your visitors may now see this amazing table of content in your blogger blog.
Awesome Trick man,I added it to my f*cking blog TechEthix
ReplyDeleteOwsume.......thanks for Sharing
ReplyDeletekeep sharing such wonderful tools
OEWAYS
thanks for Sharing keep sharing such wonderful tools :)
DeleteMuchas gracias. Eres un genio!!
ReplyDeleteNice dude
ReplyDeleteTaufik Nurrohman, he is my friend, we from indonesia
ReplyDeleteHey! Wonderful contents widget, works a treat. Just wondering if there's any way to make the list of Labels wider, since I have a few long-ish labels?
ReplyDeleteHi Lewis to make the label side wider add the below given code just at the end of the code given in this post.
Delete[pre]
<style>
#tabbed-toc .toc-content, #tabbed-toc .divider-layer{
width: 60% !important;
}
#tabbed-toc .toc-tabs {
width: 40% !important;
}
</style>
[/pre]
was very useful ! ,.
ReplyDeleteinstalled it in 8ruuux download
Thanks Man a great Widget!
ReplyDeleteI have installed it in www.miniWorldFree4u.blogspot.com
Wonderful tutorial, it works great. (๑‵●‿●‵๑)
ReplyDeletewww.gamecover.com.br uses to! thanks!
ReplyDeleteHello I want to use in www.mysound-mag.com , but i have too many labels... like... 500. and i want filter only the most important. Can you help me how can i do this? Thank u
ReplyDeleteCan you just make a code for only selected labels..?
ReplyDeleteI'm getting an error that says, "The server http://reader-download.googlecode.com:80 requires a username and password. The server says: Google Code Subversion Repository"
ReplyDeleteHi friend..
ReplyDeleteyour css and java script on you page that need log ini with account user and password... how to tabbed table of content can work in my blog...
kayicarus [at] yahoo.com
Hi, I am the script author. For a valid reason my account in reader-download has been banned by Google. Now the script has been moved to this subdomain: dte-project.googlecode.com/svn/trunk
DeleteRead more: hxxp://www.dte.web.id/2012/10/widget-daftar-isi-tabulasi-untuk-bogger.html
hi, i tried but it say i need to log in....
ReplyDeleteplease answer.
thank you
Fixed, you can check it now. Thanks for informing.
DeleteThis code is not working in my blogspot blog.
ReplyDeleteAwesome!
ReplyDeleteLooks it does not work on my blog http://wlashack.blogspot.cz/p/loading.html
ReplyDeleteIt always stops on "Loading..." and no article is displayed.
Can someone help, please? Thanks.
Niiceee
ReplyDeleteNice Post
ReplyDeleteKeep It Up:)
Regards SEO Tips 2015
Tried to add this and all it delivered on two different blogs was a green line with Loading... in it and nothing else unfortunately.
ReplyDeleteBlog I most wanted to use it on was www.tottenhamhotspur.blogspot.com
Thanks for the posting
ReplyDeleteVery useful and looking good.
ReplyDeleteThank you. Sooooo much.
not working anymore
ReplyDeleteHi,thank for your important tutorial about blogspot.
ReplyDeleteFor more,please visit my blog.
https://blogsnucleus.blogspot.com/