JAVASCRIPTS
/**
* Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
* Free for change but keep the original attribution.
* URL: https://plus.google.com/108949996304093815163/about
* TEMPLATES: <div id="tabbed-toc"><span class="loading">Loading...</span></div><script type="text/javascript">var tabbedTOC = {blogUrl: "https://latitudu.blogspot.com", containerId: "tabbed-toc", activeTab: 1, showDates: false, showSummaries: false, numChars: 900, showThumbnails: false, monthNames: ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"], newTabLink: true, maxResults: 9999, preload: 0};</script><script type="text/javascript" src="js/tabbed-toc.js"></script>
*/
function showTabs(json) {
var total = parseInt(json.feed.openSearch$totalResults.$t, 10),
skeleton = "",
c = tabbedTOC,
entry = json.feed.entry.sort(function(a,b) {
return (a.title.$t.localeCompare(b.title.$t));
}),
category = json.feed.category.sort(function(a,b) {
return (a.term.localeCompare(b.term));
});
// Build the tabs skeleton
skeleton = '<span class="divider-layer"></span><ul class="toc-tabs">';
for (var h = 0; h < category.length; h++) {
skeleton += '<li class="toc-tab-item-' + h + '"><a href="javascript:clickTab(' + h + ');"';
skeleton += (h == (c.activeTab-1)) ? ' class="active-tab"' : '';
skeleton += '>' + category[h].term + '</a></li>';
}
skeleton += '</ul>';
// Bulid the tabs contents skeleton
skeleton += '<div class="toc-content">';
for (var i = 0; i < category.length; i++) {
skeleton += '<ol class="panel" data-category="' + category[i].term + '"';
skeleton += (i != (c.activeTab-1)) ? ' style="display:none;"' : '';
skeleton += '>';
for (var j = 0; j < total; j++) {
if (j == entry.length) break;
var link, entries = entry[j],
title = entries.title.$t.replace(/<S[^>]*>/g,""), // Get the post title
summary = ("summary" in entries && c.showSummaries === true) ? entries.summary.$t.replace(/<(.*?)>/g,"").substring(0,c.numChars) + '…' : '', // Get the post summary
img = ("media$thumbnail" in entries && c.showThumbnails === true) ? '<img class="thumbnail" alt="" src="' + entries.media$thumbnail.url + '"/>' : '', // Get the post thumbnail
pub = entries.published.$t, // Get the post date
month = c.monthNames, // Month array from the configuration
cat = (entries.category) ? entries.category : [], // Post categories
date = (c.showDates) ? '<time>' + pub.substring(8,10) + ' ' + month[parseInt(pub.substring(5,7),10)-1] + ' ' + pub.substring(0,4) + '</time>' : ''; // Formated published date
for (var k = 0; k < entries.link.length; k++) {
if (entries.link[k].rel == 'alternate') {
link = entries.link[k].href; // Get the post URL
}
}
for (var l = 0; l < cat.length; l++) {
var target = (c.newTabLink) ? ' target="_blank"' : ''; // Open link in new window?
// Write the list skeleton only if at least one of the post...
// ... has the same category term with one of the current categories term list
if (cat[l].term == category[i].term) {
skeleton += '<li title="' + cat[l].term + '"';
skeleton += (c.showSummaries) ? ' class="bold"' : '';
skeleton += '><a href="' + link + '"' + target + '>' + title + date + '</a>';
skeleton += (c.showSummaries) ? '<span class="summary">' + img + summary + '<span style="display:block;clear:both;"></span></span>' : '';
skeleton += '</li>';
}
}
}
skeleton += '</ol>';
}
skeleton += '</div>';
skeleton += '<div style="clear:both;"></div>';
document.getElementById(c.containerId).innerHTML = skeleton;
}
function clickTab(pos) {
var a = document.getElementById(tabbedTOC.containerId),
b = a.getElementsByTagName('ol'),
c = a.getElementsByTagName('ul')[0],
d = c.getElementsByTagName('a');
for (var t = 0; t < b.length; t++) {
b[t].style.display = "none";
b[parseInt(pos, 10)].style.display = "block";
}
for (var u = 0; u < d.length; u++) {
d[u].className = "";
d[parseInt(pos, 10)].className = "active-tab";
}
}
(function() {
var h = document.getElementsByTagName('head')[0],
s = document.createElement('script');
s.type = 'text/javascript';
s.src = tabbedTOC.blogUrl + '/feeds/posts/summary?alt=json-in-script&max-results=' + tabbedTOC.maxResults + '&orderby=published&callback=showTabs';
if (tabbedTOC.preload !== "onload") {
setTimeout(function() {
h.appendChild(s);
}, tabbedTOC.preload);
} else {
window.onload = function() {
h.appendChild(s);
};
}
})();
CSS
/* Skin for Blogger Tabbed Layout TOC */
#tabbed-toc {
margin:0 auto;
background-color:#224C19;
-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;
}
}
HTML
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="https://hompimpaalaihumgambreng.blogspot.com/2012/10/widget-daftar-isi-tabulasi-untuk-bogger.html" title="Tabbed TOC">DTE :]</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "https://nama_blog.blogspot.com", // 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)
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum posts result
preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script type="text/javascript" src="https://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>
Sumber :
www.dte.web.id
0 comments:
Posting Komentar