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.

Customization

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

 Must Read : Blogger Feature Post slider

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