28 January 2014

Add Table of Contents Widget for Blogger

Adding a table of contents widget into your blog is a great idea.It's also called as sitemap page of your entire blog.It'll show your visitor all the posts you have into your blog.Table of contents also referred as sitemap widget too.Adding a  table of contents widget will definitely increase your number of blog reader and also your blog bounce rate too.So you may already have seen these table of contents widgets on various blog and you may also liked it.So here today we're going to provide such a table of contents  widget in a simple way.You can also get the live demo here below.

Live Demo

 Must Read : Add Marquee on Your Blog

Add Sitemap Page On Blogger

  • Log onto Blogger >> Dashboard >> Pages 
  • Create New Page >> Blank Page

  • Insert Page Title of your choice.
  • Go to HTML tab

  • Copy the Code below and paste there in the HTML tab.

<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> <script type="text/javascript"> var tabbedTOC = { blogUrl: "http://www.techtrickhome.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>

  • Now publish the page and you're done.


Replace http://www.techtrickhome.com/ with your blog url address.

Now take a look into your new sitemap widget.Hope you'd like it.If you're having any problem regarding this ask through your comment.If you like it then please share it.

Articles You May Like

5 comments: Leave Your Comments

  1. Wow! this is amazing! thanks for this wonderful tutorial :)

  2. Table of content can really help organize your site.

  3. wow how did you do that Live demo thingy?! :D

  4. I really am loving this blog :) Good tips for bloggers :)