How To Create Tabbed Sitemap Page for Blogger

Sitemap Page for Blogger - The stand of Material is precisely what every doodle kit likes to enhance his blog site. It aids in lowering the reversal rate on the blog in addition to increasing the particular page views.

Today Let me show you ways to add a great Table associated with Contents widget to a page of your respective blog. This widget is made by Taufik Nurrohman associated with DTE. The concept of this widget is very simple. It will be coded by making use of JavaScript in addition to CSS. Furthermore, it has many choices and setting that we will summarize below.

Sitemap Page for Blogger
Sitemap Page for Blogger

Step 1: Creating a New Page

First of all, we need to create a new page and to do this first 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="" 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="" title="Tabbed TOC">Blogger Tricks Tips</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "", // 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: "", // A "no thumbnail" URL
    monthNames: [ // Array of month names
    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 type="text/javascript" src=""></script>

Copy and paste the above-given code in the post editor.

Step 3: Table of Content Settings

 Now change the URL in the Blog URL 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. 

You can also read: How To Add Floating social media buttons for Blogger

Post a Comment