Search Box by All Blogger Tricks

Thursday 17 October 2013

Tabbed Table of Contents with Thumb & Description Widget for Blogger


Freelance Jobs
Table of Contents

Tabbed Table of Contents with Thumb & Description Widget for Blogger. This is a modified & improved version of "Tabbed Table of Contents Widget for Blogger" widget published by allbloggertricks.com

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. This is a

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.




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.
You can also add this code to your sidebar

/* Skin for Blogger Tabbed Layout TOC */
<style>
#tabbed-toc {
  margin:0 auto;
  background-color:#4488DD;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#333;
}

#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px Arial,Sans-Serif;
  color:white;
}

#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}

#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Arial,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#ccc;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}

#tabbed-toc .toc-tabs li a:hover {
  background-color:#153615;
  color:white;
}

#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#275827;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}

#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #275827;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}

#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Arial,Sans-Serif;
}

#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#892412;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}

#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}

#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  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 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}

#tabbed-toc .panel li:nth-child(even) {
  background-color:#FFE8E3;
}

#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:#333;
  color:white;
  outline:none;
}

#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}

@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
} </style>
<div id="tabbed-toc"><span class="loading">Loading...</span></div>

<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://widgetsbay.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: true, // `true` to show the post date
    showSummaries: true, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: true, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 100, // 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://reader-download.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
Now it's time for Customisations

Advanced Settings

Option Information
blogUrl Replace value with your blog address.
containerId ID element to be used as a container for JSON that has been processed (ignore if not necessary).
activeTab Used to determine the serial number of the active tab (value of 1 will make the first tab in order to be active, as well as the first tab content will also open the first time the page is accessed).
showDates Change the value to true to display the time of sunrise posting.
showSummaries Change the value to true to display a summary post.
showThumbnails Change the value to true to display the post thumbnail (not recommended because it will make the old page loaded).
thumbSize Used to determine the size of a thumbnail.
noThumb Backup image URL for the post that has no pictures in it.
monthNames Used to specify the names of the months according to the dating system in the country where you live.
newTabLink If the value true , all links will open in a tab / new window when clicked.
maxresults The maximum number of posts to be displayed.
preload Used to determine the time delay loading of JSON. Use milliseconds or simply write "onload" that this widget to load after the entire page has finished loaded.
sortAlphabetically false to sort normally posts by moonrise, true to sort posts based on the alphabet.
showNew false to hide the marks New!. Change the numbers to determine how much of the recent posts that want to be labeled New!.
newtext HTML markup to create the label New free! The latest postings.

<<<<<****************************************************************>>>>>
We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, 
<<<<<****************************************************************>>>>>

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible


0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Support: Contact Us | Feedback & Support | About Us
Links: Developer | Request/Publish/Remove Widget | Widgets by Widgets Bay
Donate Us via: PayPal Powered by: Blogger
Published by: Widgets Bay | Privacy Policy | Terms of Service
Copyright © 2013Widgets Bay - All Rights Reserved