Table Of Contents Widget: Label Sort Tweak
2/13/2009 02:44:00 AM Posted by c3v3n
The Table of Contents Widget is one of the most useful hacks/tweaks for Blogger or Blogspot blogs. This hack was created by Hans of Beautiful Beta and aims to show all posts in a "table-of-contents" format. Readers may see all the blog posts in one glance, have the entries filtered according to Labels; and have them re-arranged according to Post Title and Date. In this post, let's work on making the Category/Label sortable as well, shall we?
2 Ways To Install the Table Of Contents Widget.
For those who do not have this widget yet, there are basically two ways to install this. Below are the procedures, demo and installation instructions.
(1) Accessibility in ALL PAGES.
If you would like the ToC or Table of Contents accessible in all pages, check out the following instructions.
Installation Guide..
BlogToC Widget Released
by Hans, Beautiful Beta
PROS: Readers may view the ToC widget just above the blog posts. This makes it easier for readers to browse through the articles without leaving the currently loaded page.
CONS: This method is not advisable for a blogspot blog that has a heavy content.
CONS: This method is not advisable for a blogspot blog that has a heavy content.
Demo.
The Technical Thought Of You BETA
(2) Accessibility in ONE PAGE.
If you would like to create a shortcut on the sidebar or top navigation/menu and add a new post to hold this widget, read on.
Installation Guide.
A Beautiful Blogger Table Of Contents
by SBA, BP News and Tips
Demo1 (Top Navigation/Menu).
BP News and Tips
Demo2 (Sidebar Shortcut).
Destiny
PROS: This method is especially helpful to blogs that have more than 20 posts and contain heavy content as this prevents any performance issues on the readers' browsing experience.
Note from the Blog Author: I used to have it accessible in ALL pages but my site's load time slowed down due to the fetching of posts. I am now working on the latter procedure for this blog. For those who have lots of content on their blogs, I then recommend the second one for its advantages.
Note from the Blog Author: I used to have it accessible in ALL pages but my site's load time slowed down due to the fetching of posts. I am now working on the latter procedure for this blog. For those who have lots of content on their blogs, I then recommend the second one for its advantages.
How To Sort Labels In The Table Of Contents Widget.
The sorting of LABELS involves editing/adding codes in the 4 sections of the .js (javascript file). Just follow this simple steps.
(1) Go to Beautiful Beta's blog post and view the code.
(2) Go to File. Save Page As. Save the blogtoc.js file.
(3) Open the downloaded file in NOTEPAD or TEXTPAD.
(4) Search for this line of code
for (var i=0; i < postTitle.length-1; i++) {
and add the following lines at the latter part as shown in the image far below:
if (sortBy == "labelasc") { if (postLabels[i] > postLabels[j]) { swapPosts(i,j); } }
if (sortBy == "labeldesc") { if (postLabels[i] < postLabels[j]) { swapPosts(i,j); } }
if (sortBy == "labeldesc") { if (postLabels[i] < postLabels[j]) { swapPosts(i,j); } }
View Full Size
(5) Scroll down. Look for
function displayToc(filter) {
There are a series of conditions there. Right under the "datenewest" one:
if (sortBy == "datenewest") {
tocTool1 += ' (ascending)';
tocTool2 += ' (oldest first)';
}
tocTool1 += ' (ascending)';
tocTool2 += ' (oldest first)';
}
add the following lines as shown in the image above:
if (sortBy == "labelasc") {
tocTool1 += ' (descending)';
tocTool2 += ' (newest first)';
}
if (sortBy == "labeldesc") {
tocTool1 += ' (ascending)';
tocTool2 += ' (newest first)';
}
tocTool1 += ' (descending)';
tocTool2 += ' (newest first)';
}
if (sortBy == "labeldesc") {
tocTool1 += ' (ascending)';
tocTool2 += ' (newest first)';
}
(6) Look for this line.
tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>'
replace this with:
tocTable += '<a href="javascript:toggleLabelSort();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
(7) Scroll down. Search for:
function toggleDateSort() {
The conditions for the toggle of the DateSort is declared here. Right after the line comment - // end toggleDateSort, include the following as shown in the far below image.
function toggleLabelSort() {
if (sortBy == "labelasc") { sortBy = "labeldesc"; }
else { sortBy = "labelasc"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleLabelSort
if (sortBy == "labelasc") { sortBy = "labeldesc"; }
else { sortBy = "labelasc"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleLabelSort
View Full Size
(7) Save.
(8) Upload the .js to your server (or googlepages if you have one).
REMINDER. Do not forget to update your HTML code from:
<script src="http://home.kpn.nl/oosti468/downloads/blogtoc.js">
to
<script src="http://yourservername.com/blogtoc.js">
or
<script src="http://yourusername.googlepages.com/blogtoc.js">
As a reference, here is the complete code used on my test blog.
As a working example, check out:
The Technical Thought Of You BETA
Credits go to Hans of Beautiful Beta and Ramani of Hackosphere for creating and developing this amazing hack; Marg Choco of Turtle Soup for the Ethereal Substance where I got the CSS tweak; SBA of BP News and Tips for her excellent tutorial on ToC installation and Fransiska Ike of Destiny where I initially found out about the ToC sidebar shortcut.
Enjoy tweaking! ^_^
0 comments:
Post a Comment