How to make TOC for blogger used blogger.com platform using JScript

Make TOC For Blogger Who Used ".blogspot"
Now time, I will teach you about blogger TOC. As long as I know blogger.com came with no TOC included in their page elements, but you don't need to worried about this unhappy fact!. Don't know what TOC mean?... TOC mean is Table Of Contents. ATTENTION! This TOC JScript MUST BE hosted by your own hosting services, just ignored this attention if you decide to used my hosting. All contents MUST BE hosted in same hosting. All contents is TOC JScript file and image file link, just ignored this attention if you decide to used my hosting. This code only running properly when it placed in same hosting, its can be more faster to running and great working too. If you did split the TOC JScript and images hosted by different hosting, it will make your code running very slow!. Step 1 Please copy and paste that code below into your standard MS Windows for Text Document also known as Note pad application. After that you will renamed it as you want and DON'T FORGET to give a .js extension when you renamed those file's. For your information, .js extension is to create a JScript file, without these you can't doing done with this path to create your own blog TOC. // ---------------------------------------------------<br /> // BLOGTOC<br /> // ---------------------------------------------------<br /> // BlogToc creates a clickable Table Of Contents for .blogspot<br /> // ---------------------------------------------------<br /> // Original creator = I didn't know who that guys but those guys have blog named "beta"<br /> // Original creator Url = ??<br /> // Author: Zazali Nordin<br /> // Url: http://download-file blog.blogspot.com<br /> // Version: 2 (maybe)<br /> // Date: 2008-10-05<br /> // ---------------------------------------------------<br /> <br /> // global arrays<br /> <br /> var postTitle = new Array(); // array of posttitles<br /> var postUrl = new Array(); // array of posturls<br /> var postDate = new Array(); // array of post publish dates<br /> var postSum = new Array(); // array of post summaries<br /> var postLabels = new Array(); // array of post labels<br /> <br /> // global variables<br /> var sortBy = "titleasc"; // default value for sorting ToC<br /> var tocLoaded = false; // true if feed is read and ToC can be displayed<br /> var numChars = 250; // number of characters in post summary<br /> var postFilter = ''; // default filter value<br /> <br /> // main callback function<br /> <br /> function loadtoc(json) {<br /> <br /> function getPostData() {<br /> // this functions reads all postdata from the json-feed and stores it in arrays<br /> if ("entry" in json.feed) {<br /> var numEntries = json.feed.entry.length;<br /> // main loop gets all the entries from the feed<br /> for (var i = 0; i < numEntries; i++) { // get the entry from the feed var entry = json.feed.entry[i]; // get the posttitle from the entry var posttitle = entry.title.$t; // get the post date from the entry var postdate = entry.published.$t.substring(0,10); // get the post url from the entry var posturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } // get the post contents from the entry // strip all html-characters, and reduce it to a summary if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; // strip off all html-tags var re = /<\S[^>]*>/g; <br /> postcontent = postcontent.replace(re, "");<br /> // reduce postcontent to numchar characters, and then cut it off at the last whole word<br /> if (postcontent.length > numChars) {<br /> postcontent = postcontent.substring(0,numChars);<br /> var quoteEnd = postcontent.lastIndexOf(" ");<br /> postcontent = postcontent.substring(0,quoteEnd) + '...';<br /> }<br /> <br /> // get the post labels from the entry<br /> var pll = '';<br /> if ("category" in entry) {<br /> for (var k = 0; k < entry.category.length; k++) { pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\')" title="Only display TOC by labels \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>; ';<br /> }<br /> var l = pll.lastIndexOf(';');<br /> if (l != -1) { pll = pll.substring(0,l); }<br /> }<br /> <br /> // add the post data to the arrays<br /> postTitle.push(posttitle);<br /> postDate.push(postdate);<br /> postUrl.push(posturl);<br /> postSum.push(postcontent);<br /> postLabels.push(pll);<br /> }<br /> }<br /> } // end of getPostData<br /> <br /> // start of showtoc function body<br /> // get the number of entries that are in the feed<br /> // numEntries = json.feed.entry.length;<br /> <br /> // get the postdata from the feed<br /> getPostData();<br /> <br /> // sort the arrays<br /> sortPosts(sortBy);<br /> tocLoaded = true;<br /> }<br /> <br /> <br /> <br /> // filter and sort functions<br /> <br /> <br /> function filterPosts(filter) {<br /> // This function changes the filter<br /> // and displays the filtered list of posts<br /> <br /> postFilter = filter;<br /> displayToc(postFilter);<br /> } // end filterPosts<br /> <br /> function allPosts() {<br /> // This function resets the filter<br /> // and displays all posts<br /> <br /> postFilter = '';<br /> displayToc(postFilter);<br /> } // end allPosts<br /> <br /> function sortPosts(sortBy) {<br /> // This function is a simple bubble-sort routine<br /> // that sorts the posts<br /> <br /> function swapPosts(x,y) {<br /> // Swaps 2 ToC-entries by swapping all array-elements<br /> var temp = postTitle[x];<br /> postTitle[x] = postTitle[y];<br /> postTitle[y] = temp;<br /> var temp = postDate[x];<br /> postDate[x] = postDate[y];<br /> postDate[y] = temp;<br /> var temp = postUrl[x];<br /> postUrl[x] = postUrl[y];<br /> postUrl[y] = temp;<br /> var temp = postSum[x];<br /> postSum[x] = postSum[y];<br /> postSum[y] = temp;<br /> var temp = postLabels[x];<br /> postLabels[x] = postLabels[y];<br /> postLabels[y] = temp;<br /> } // end swapPosts<br /> <br /> for (var i=0; i < postTitle.length-1; i++) { for (var j=i+1; j<postTitle.length; j++) { if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }<br /> if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } } if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }<br /> if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } } } } } // end sortPosts // displaying the toc function displayToc(filter) { // this function creates a three-column table and adds it to the screen var numDisplayed = 0; var tocTable = ''; var tocHead1 = 'POST TITLE'; var tocTool1 = 'KClick to sorting by post title'; var tocHead2 = 'DATE'; var tocTool2 = 'Click to sorting by date'; var tocHead3 = 'LABELS'; var tocTool3 = ''; if (sortBy == "titleasc") { tocTool1 += ' (descending)'; tocTool2 += ' (newest first)'; } if (sortBy == "titledesc") { tocTool1 += ' (ascending)'; tocTool2 += ' (newest first)'; } if (sortBy == "dateoldest") { tocTool1 += ' (ascending)'; tocTool2 += ' (newest first)'; } if (sortBy == "datenewest") { tocTool1 += ' (ascending)'; tocTool2 += ' (oldest first)'; } if (postFilter != '') { tocTool3 = 'Click to display all posting in TOC'; } tocTable += '<table>';<br /> tocTable += '<br /> <tr>';<br /> tocTable += '<td class="toc-header-col1">';<br /> tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';<br /> tocTable += '</td>';<br /> tocTable += '<td class="toc-header-col2">';<br /> tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';<br /> tocTable += '</td>';<br /> tocTable += '<td class="toc-header-col3">';<br /> tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';<br /> tocTable += '</td>';<br /> tocTable += '</tr><br /> <br /> <br /> ';<br /> for (var i = 0; i < postTitle.length; i++) { if (filter == '') { tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr><br /> <br /> <br /> ';<br /> numDisplayed++;<br /> } else {<br /> z = postLabels[i].lastIndexOf(filter);<br /> if ( z!= -1) {<br /> tocTable += '<br /> <tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr><br /> <br /> <br /> ';<br /> numDisplayed++;<br /> }<br /> }<br /> }<br /> tocTable += '</table>';<br /> if (numDisplayed == postTitle.length) {<br /> var tocNote = '<span class="toc-note">TOC had found ' + postTitle.length + ' posting<br /> </span>'; }<br /> else {<br /> var tocNote = '<span class="toc-note">Displaying ' + numDisplayed + ' posts labeled \'';<br /> tocNote += postFilter + '\' of '+ postTitle.length + ' posts total<br /> </span>';<br /> <br /> }<br /> var tocdiv = document.getElementById("toc");<br /> tocdiv.innerHTML = tocNote + tocTable;<br /> } // end of displayToc<br /> <br /> function toggleTitleSort() {<br /> if (sortBy == "titleasc") { sortBy = "titledesc"; }<br /> else { sortBy = "titleasc"; }<br /> sortPosts(sortBy);<br /> displayToc(postFilter);<br /> } // end toggleTitleSort<br /> <br /> function toggleDateSort() {<br /> if (sortBy == "datenewest") { sortBy = "dateoldest"; }<br /> else { sortBy = "datenewest"; }<br /> sortPosts(sortBy);<br /> displayToc(postFilter);<br /> } // end toggleTitleSort<br /> <br /> <br /> function showToc() {<br /> if (tocLoaded) { <br /> displayToc(postFilter);<br /> var toclink = document.getElementById("toclink");<br /> toclink.innerHTML = '<a href="javascript:hideToc();"> <img border="0" style="float:left; margin:0 5px 5px 0;cursor:pointer; cursor:hand;" src="http://www.geocities.com/sharemalaysia/image/delete2.png"><font color="#000000"> Hiding all posting TOC</font></a>';<br /> }<br /> else { alert("Please wait for loading page..."); }<br /> }<br /> <br /> function hideToc() {<br /> var tocdiv = document.getElementById("toc");<br /> tocdiv.innerHTML = '';<br /> var toclink = document.getElementById("toclink");<br /> toclink.innerHTML = '<a href="javascript:showToc();"> <img border="0" style="float:left; margin:0 5px 5px 0;cursor:pointer; cursor:hand;" src="http://www.geocities.com/sharemalaysia/image/add2.png"><font color="#000000"> Display all posting TOC</font></a>';<br /> }<br /> <br /> Tips Please DO NOT try to modify this code if you're still beginner. Take the easy way from me to grab this code and just use it. If you change your mind and then you want a try to modify this code, its up to your desires.  Please go find that code line from my TOC JScript above and you should be make a change with your image file link. This is my image file link: http://www.geocities.com/sharemalaysia/image/delate2.png http://www.geocities.com/sharemalaysia/image/add2.png After you make a change with my image file link, be sure to put your own image file link to the correct path when replace mine, and after that just save it with .js extension to make your own version of TOC JScript with your own image link from your HOSTING. If you not sure about what I'm tried to said, just ignore these tips and move to Sep 2. Step 2 Now you already had you own TOC JScript with your own images or my images in your PC's. If your already saved your JScript file with your own image file link, you should hosted your Jscript with same hosting. If you decide to using mine, go ahead to Step 3. Step3 Sign in to Blogger => New Post => Edit HTML If you want to using the TOC JScript and images file from my hosting, just altered the green code with your blog's name without worried. Copy and paste the code below to your blank brand new "NEW POST". Just make a post like your ordinary method. You almost done... and you should see the Step 4 now. But if you decide to using your own hosting, please take a look the steps below: Please replace my IMAGE file link with your own image file had you created and hosted. Please replace my JScript link to your JScript with your images link inside and already hosted by your own with same hosting service. Replace with your blog's name. After you'll did done altering all those above, just go ahead to make "NEW POST". Just copy and put the line code inside "Edit HTML" in Post Section. <div id="toclink"> <a href="javascript:showToc();"> <img border="0" src="http://www.geocities.com/sharemalaysia/image/add2.png"/><font color="#000000"><b> Click here to display all post TOC</b></font></a> </div> <script style="text/javascript" src="http://www.geocities.com/sharemalaysia/fulldownload.js"></script> <script src=" http://download-file-blog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script> <div id="toc"> </div> Don't forget to click "PUBLISH POST" button after you done!. Step 4 ATTENTION! Don't forget to backup your "Template" first! Now time for making your TOC table. In this section, you can alter whatever various colors as your want. Go to Layout => Edit HTML Please go find this code in CSS list tail code, <b:skin><![CDATA[/* . After you found it, go direct to copy and paste these below <b:skin><![CDATA[/*. /* Show Table of Contents<br /> -----------------------------------------<br /> */<br /> #toc {<br /> border: 0px solid #78B749;<br /> background: #ffffff;<br /> padding: 5px;<br /> width:500px;<br /> margin-top:10px;<br /> }<br /> .toc-header-col1, .toc-header-col2, .toc-header-col3 {<br /> background: #cccccc;<br /> color: #444;<br /> padding-left: 5px;<br /> font-weight:bold;<br /> width:250px;<br /> }<br /> .toc-header-col2 {<br /> width:75px;<br /> }<br /> .toc-header-col3 {<br /> width:125px;<br /> }<br /> .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 {<br /> font-size:95%;<br /> text-decoration:none;<br /> text-align: Left;<br /> border-bottom-width: 1px;<br /> border-bottom-style: solid;<br /> border-bottom-color: #cccccc;<br /> }<br /> .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {<br /> font-size:95%;<br /> text-decoration:underline;<br /> text-align: left;<br /> border-bottom-width: 1px;<br /> border-bottom-style: solid;<br /> border-bottom-color: #cccccc;<br /> }<br /> <br /> .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {<br /> padding-left: 5px;<br /> text-align: left;<br /> font-size:95%;<br /> border-bottom-width: 1px;<br /> border-bottom-style: solid;<br /> border-bottom-color: #cccccc;<br /> }<br /> After you done pasted the CSS code, don't forget to click "SAVE TEMPLATE"  and you almost done! Step 5 Click "View Blog" and you done perfectly. Test your TOC post and give that post as your special navigation onto your blog, you can put that single post inside you menu too because your visitors also interest to navigate your site/blog with easiest priority one. For your example, please go here to looks what exactly the Blog TOC function. Please ask to me if you got the problem with this tutorial, just leave the comment. I can help you maybe... Oh ya, don't forget to download my J-Pop collections too, its free... Enjoy yourself!.