Table of content or effectively called site-map of your blog gives your readers a navigation platform that is designed for them to go through their required topic much easily. Blogger does not provide such kind of widget but it can be externally added. There different types of table of content widget that are available over various widget providing blogs, out of which I have selected few and compiled them in one place for you.
Some of the widget do provide different options included, and some of them don't. In this article we will be discussing these different TOC and their pros & cons. The installing method is common for all of them.
How to add below TOC's in your bloggers blog ?
Go to pages > Click on new page
Now click on HTML and add any one of below code inside it. To increase effectiveness of the sitemap make sure to disable comment on that page and hide your sidebar if you have one. Also make sure to replace our blog link with your blog link whenever you find it in the code.
We have also added are Recommendation Index (RI), where 1 being the lowest recommended number and 5 being the highest recommended number.
5 = Highly recommended
1 = Not recommended
1: Sorted - Table of content : RI Score - 2.5
Pros :
All articles are shown in single page.
Labels are clickable and allow user to see topic that are also labelled with that label.
Easy navigation.
Light weight.
Can be Sorted by dates, labels and alphabetically.
Cons:
All article are shown in single page, this method will be in serious question if total numbers article posted exceed hundred in numbers.
How to Navigate ?<br />
<br />
<ul style="text-align: left;">
<li>Click on <span style="color: red;"><i>Post Title</i></span> to sort articles Alphabetical</li>
<li>Click on <span style="color: red;"><i>Date</i> </span>to sort articles as per their posted dates.</li>
<li>Click on any <span style="color: red;"><i>Label</i></span> to see Other's article tag with that particular label.</li>
<li>To see all posts click on <span style="color: red;"><i>Label Tab</i></span></li>
</ul>
<br />
<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://blogeutectics.googlecode.com/svn/Sitemap-Eutectics.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style>#bp_toc{background:0 0;width:100%;color:#999;margin:0 auto;padding:5px}.toc-header-col1{padding:15px!important;line-height:15px;background-color:#e86060;width:250px;}.toc-header-col2{padding:15px!important;line-height:15px;background-color:#373737;width:75px;}.toc-header-col3{padding:15px!important;line-height:15px;background-color:#377ef0;width:125px;}.toc-header-col1:hover,.toc-header-col2:hover,.toc-header-col3:hover{opacity:.9}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:15px;text-decoration:none;color:#fff;font-family:Raleway;font-weight:400;letter-spacing:.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px;font-size:92%;}.toc-entry-col1:hover,.toc-entry-col2:hover,.toc-entry-col3:hover{background: #E7F7FA;}.toc-entry-col1:nth-child(even),.toc-entry-col1:nth-child(odd),.toc-entry-col2:nth-child(even),.toc-entry-col2:nth-child(odd),.toc-entry-col3:nth-child(even),.toc-entry-col3:nth-child(odd){padding:10px;font-size:92%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{text-decoration:none;color:#666}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#000;text-decoration:underline}span.toc-note{padding:10px;margin:10px 0;display:inline-block;background:#fff;color:#666}#bp_toc table{width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color:transparent}#bp_toc tr:nth-child(even){background:#fafafa}#bp_toc tr:nth-child(odd){background:#fff}#secondarybpart{display:none}#primarybpart{width:100%}.entry-content td {
border-top: 0px;}</style>
2: Searchable TOC : RI score - 3
Pros :
Shown only certain numbers of article in a page.
Search options provide.
Article can also be sorted by selecting label.
Updated article can also be known with help of this TOC.
It provide "load more" article options which come in handy when article are more in numbers.
Cons:
When search options are used the result are shown in alert dialog box which can be annoying for some people.
<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="table-outer"><table><tbody>
<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher"><input type="text" /></form></td></tr>
</tbody></table></div><header id="resultDesc"></header><br />
<ul id="feedContainer"></ul><div id="feedNav">Loading...</div><script src="https://blogeutectics.googlecode.com/svn/trunk/sitemap-eutecticsV2.js" type="text/javascript"></script><br />
</div>
<style>
#table-outer table {width:100%;margin:0;padding:0;}
#table-outer input, #table-outer select {padding:4px;font:inherit;border:2px solid #ecf0f1;width:170px;box-sizing:border-box;}
#table-outer select {cursor:pointer;outline:none}
#table-outer input:focus{outline:none}
#resultDesc {margin-bottom:10px;}
#feedContainer {overflow:hidden;margin-top:20px;}
#feedContainer strong {font-size:10px;}
#feedContainer, #feedContainer li {padding:0;margin:0;list-style:none;}
#feedContainer li {float:left;margin-bottom:10px;position:relative;z-index:0;}
#feedContainer .inner {padding:8px;margin: 0 5px;position:relative;background-color:#fff;border:1px solid #f9f9f9;height:133px;}
#feedContainer img {float:left;margin: 0 8px 0 0;max-width:100%;border:1px solid #f9f9f9;padding:2px;}
#feedContainer .toc-title {max-height:33px;overflow:hidden;}
#feedContainer .toc-title:hover {text-decoration:underline;}
#feedContainer .news-text {font-size:11px;}
#feedNav a, #feedNav span {display:block;text-align:center;color:#fff;
text-decoration:none;background-color:#444;padding:5px;width:95%;margin: 0 auto;transition:all 0.3s linear;}
#feedNav a, #feedNav span:hover {background-color:#333;transition:all 0.3s linear;}
#feedContainer .date {display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px;}
#feedContainer .date .dd {font-size:9px;line-height:5px;font-weight:bold;}
#feedContainer .date span {display:inline-block;line-height:5px;text-align:center;
margin-left:5px;}</style>
3: Searchable Version - 2 TOC : RI score - 3
In this TOC the cons of above TOC has been removed, also it does provide "load more" options in next article fashion for more try using on your blog.
<div class="eu-outer" id="eu-outer"><table border="0"><tbody><tr><td><label for="eu-feed-order">Sort articles by:</label></td><td><select class="eu-feed-order" id="eu-feed-order"><option value="published" selected="selected">New Post</option><option value="updated">Post Updated</option></select></td></tr><tr><td><label for="eu-label-sorter">Filter posts by category :</label></td><td><select class="eu-label-sorter" id="eu-label-sorter" disabled="disabled"><option selected="selected">loading...</option></select></td></tr><tr><td><label for="eu-feed-searcher-text">Search by keyword:</label></td><td><form class="eu-feed-searcher" id="eu-feed-searcher"><input type="text" class="eu-feed-searcher-text" id="eu-feed-searcher-text" autocomplete="off"></form></td></tr></tbody></table></div><div class="eu-result-description" id="eu-result-description"></div><ul id="eu-feed-container" class="list-media eu-feed-container"></ul><div class="eu-feed-nav" id="eu-feed-nav"></div><script src="https://blogeutectics.googlecode.com/svn/trunk/sitemap-eutecticsV3.js"></script>
<style>.eu-outer table{margin:0}.eu-outer input,.eu-outer select{font:inherit;border:2px solid #e5e5e5;padding:4px;width:65%}.eu-outer label{display:block;font-weight:700;padding:6px;margin:6px 4px 0 0}.eu-feed-container{overflow:visible}.eu-outer td{padding:2px}.eu-feed-container li{list-style-type:decimal;margin-bottom:17px;padding:10px}.eu-feed-container li:first-child{border-top:none}.eu-thumbnail{float:left;margin:0 20px 0 0;display:none}.eu-summary{display:none}.eu-inner a{color:#555;font-size:17px;line-height:20px}.eu-inner a:active,.eu-inner a:focus,.eu-inner a:hover{text-decoration:underline}.eu-description-message{display:block;margin-top:17px;padding:10px 12px;font-weight:700;color:#000;text-align:center}.eu-feed-nav{margin:30px 0px 0}.eu-feed-nav span{cursor:wait}.eu-feed-container li:hover {background-color: #F7F7F7;width:96%}</style>
4: Tabbed TOC: RI score - 4.8
Pros:
All article are present in single which makes it very very to search topic.
All article are distributed according to labels.
This Table of content is very responsive as well.(Mobile friendly)
Summary can be enabled inside the javaScirpt.(Download this JavaScript for more features)
Cons:
nill so far.
<div id="tabbed-toc"><span class="loading">Loading...</span></div><script type="text/javascript">var tabbedTOC = {blogUrl:"http://eutectics.blogspot.com", containerId: "tabbed-toc", activeTab: 1};</script>
<style>#tabbed-toc{margin:0 auto;background-color:#fff;position:relative;color:#333}#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;color:#fff}#tabbed-toc li,#tabbed-toc ol,#tabbed-toc ul{margin:0;padding:0;list-style:none}#tabbed-toc .toc-tabs{width:20%;float:left}#tabbed-toc .toc-tabs li a{display:block;overflow:hidden;text-overflow:ellipsis;color:#000;text-decoration:none;padding:9px;cursor:pointer}#tabbed-toc .toc-tabs li a:hover{background-color:#D85252;color:#fff}#tabbed-toc .toc-tabs li a.active-tab{background-color:#343434;color:#fff;position:relative;z-index:5;margin:0 -1px 0 0}#tabbed-toc .divider-layer,#tabbed-toc .toc-content{width:80%;float:right;background-color:#fff;border-left:5px solid #343434;-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}#tabbed-toc .panel{position:relative;z-index:5}#tabbed-toc .panel li a{display:block;position:relative;font-size:15px;color:#000;line-height:20px;padding:12px;text-decoration:none;outline:0;overflow:visible}#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:400;font-size:10px;color:#666;float:right}#tabbed-toc .panel li .summary{display:block;padding:10px 12px;font-style:italic;border-bottom:2px solid #888;overflow:hidden}#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}#tabbed-toc .panel li:nth-child(even){background-color:#eee}#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:hover time{text-decoration:underline;outline:0}@media (max-width:700px){#tabbed-toc .toc-content,#tabbed-toc .toc-tabs{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{border:1px solid #eee}#tabbed-toc .toc-tabs li a.active-tab{background-color:#343434;color:#fff}#tabbed-toc .toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>
<script src="https://blogeutectics.googlecode.com/svn/trunk/Sitemap-eutecticsV4.js"></script>
5: List type of TOC : RI score - 2.0
Pros:
All article are present in single page labelled with respective labels.
Cons:
If numbers of article runs in hundred then the page of the site-map will increase.
No features are Added in this TOC
<script src="https://blogeutectics.googlecode.com/svn/trunk/Sitemap-eutecticsV5.js"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=1000&callback=loadtoc" type="text/javascript"></script>
6: Summary TOC : RI score - 4.5
Pros:
All article are present in single page
All article can be sorted according to labels
Small summary can be seen in TOC
Cons:
nill so far
<div id="cl_option"> Loading... </div>
<div id="cl_content_list"> </div>
<script type="text/javascript">
var cl_summlen = 500,
timepub = "Posted Date",
ptitle = "Article title",
sortby = "Sort by:",
labelsort = "Filter articles by label:",
showall = "View All",
hidesum = "Hide Summary ...",
showsum = "Show Summary ...",
footlabel = "category:",
footon = "in",
showlabel = "See posing with label";
</script>
<script src="https://blogeutectics.googlecode.com/svn/trunk/Sitemap-eutecticsV6.js"></script>
<script src="http://eutectics.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script>
7: Accordion table of content : RI score - 4.7
Pros:
All article are sorted respective to their label.
Topic are distributed according to labels
Mobile friendly.
Cons:
Nill so far
<div id="table-of-content" class="table-of-content"><span class="loading">loading...</span></div>
<style type="text/css">.table-of-content{background-color:#fff;color:#999;margin-bottom:5px;-webkit-box-shadow:0 1px 2px #000;-moz-box-shadow:0 1px 2px #000;box-shadow:0 1px 2px #000;overflow:hidden}.table-of-content .toc-header{margin:0;padding:10px 15px;overflow:hidden;cursor:pointer;font:inherit;color:#000;border-top:1px solid #fff;border-bottom:1px solid #ddd;background-color:#f5f5f5}.table-of-content .toc-header.active{color:#fff;border-top:1px solid gray;border-bottom:1px solid #1f1f1f;background-color:#313131}.table-of-content .loading{display:block;padding:10px 15px;text-decoration:blink}.table-of-content ol{margin:0;padding:0;list-style:none}.table-of-content li{margin:0;padding:5px 5px 5px 15px;text-align:left;overflow:hidden;border-bottom:1px solid #e5e5e5}.table-of-content li:first-child{border-top:none}.table-of-content li:last-child{border-bottom:none}.table-of-content a{color:#5687f8;text-decoration:none}.table-of-content a:hover{text-decoration:underline}.table-of-content a:visited{color:#5687b8}.credit-link{text-align:right;margin-right:2px}</style>
<script>
var toc_config = {
url: 'http://eutectics.blogspot.com',
containerId: 'table-of-content',
showNew: 10,
newText: ' - <strong style="font-style:italic;color:red;">New</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="https://blogeutectics.googlecode.com/svn/trunk/Sitemap-eutecticsV7.js"></script>
Note that i haven't included any steps regarding extra feature of any TOC methods. Therefore if you want to download the JavaScript fell free to download it. You can download all JavaScript and modify according to your will but make sure to give due credits to the creator Taufik Nurrohman
NOTE : I will be keep updating this article for such like keep visiting. If you face any problem regarding add any of above Table of content, just comment
0 comments:
Post a Comment