Reload Page ❖ Sitemap sortir perlabelweb created
Css
Jquery
Html
Result
Show Result

Edit in JSFiddle

xxxxxxxxxx
 
​

https:////example.com/style.css X

 
1
#tocTable {
2
  border:2px solid white;
3
  font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
4
  color:#333;
5
  border-collapse:collapse;
6
  text-align:left;
7
  margin:0 auto 5px;
8
}
9
#tocTable th,
10
#tocTable td {
11
  border:1px solid white;
12
  background-color:#fafafa;
13
  padding:10px 15px;
14
}
15
#tocTable th {
16
  background-color:#5d5d5d;
17
  font-weight:bold;
18
  color:white;
19
  text-shadow:0 1px 0 rgba(0,0,0,.3);
20
}
21
#th-1 {
22
  width:55%;
23
  background-color:#5A930D;
24
}
25
#th-2,#th-3,#th-4 {width:15%}
26
#tocTable td.toc-header-col-1,
27
#tocTable td.toc-header-col-2 {
28
  padding:0 !important;
29
  background-color:#2372A7;
30
}
31
#tocTable td.toc-header-col-3,#tocTable td.toc-header-col-4 {background-color:#D7DEF0}
32
#tocTable a {
33
  display:block;
34
  text-decoration:none;
35
  color:white;
36
  padding:10px 15px;
37
  background:none;
38
}
39
#tocTable td.toc-header-col-1:hover,
40
#tocTable td.toc-header-col-2:hover {
41
  background-color:#174B6F;
42
  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
43
  -moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
44
  box-shadow:inset 0 0 3px rgba(0,0,0,.4);
45
}
46
#tocSort {
47
  display:block;
48
  width:220px;
49
  font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
50
  color:#333;
51
  cursor:pointer;
52
  border:none;
53
  outline:none;
54
  background-color:#eee;
55
  margin:0 auto 5px;
56
  padding:5px;
57
}
xxxxxxxxxx
 
​

https:////example.com/script.js X

​x
 
1
var theTotalPosts = 9999, // Tentukan jumlah maksimal posting
2
    theOptions = "Sortir...", // Label opsi 1
3
    theSortPosts = "Sortir berdasarkan Abjad", // Label opsi 2
4
    theSortLabels = "Sortir berdasarkan Label", // Label opsi 3
5
    theTitles = "Judul Artikel", // Header tabel 1
6
    theLabels = "Label Artikel", // Header tabel 2
7
    theDates = "Bulan Terbit", // Header tabel 3
8
    theBlankLabels = "Tak Berlabel", // Label kosong
9
    theSiteUrl = "https:////idtutorplus.blogspot.com", // URL blog kamu
10
    theConfig = "toc-container";
11
​
12
// Original: https:////www.threelas.com
13
// Modified by Id Tutor Plus(https:////idtutorplus.blogspot.com)
14
​
15
​
16
function toc_sort_table(a) {
17
    var post = [],
18
        label = [],
19
        timepub = [],
20
        skeleton = "",
21
        g = document.getElementById(theConfig),
22
        b = a.feed.openSearch$totalResults.$t;
23
    if (b < theTotalPosts) theTotalPosts = b - 1;
24
    for (var c = 0; c <= theTotalPosts; c++) {
25
        post[c] = a.feed.entry[c].title.$t;
26
        label[c] = a.feed.entry[c].category[0].term;
27
        timepub[c] = a.feed.entry[c].published.$t.substring(0, 10);
28
    }
29
    var d = [];
30
    for (var c = 0; c <= theTotalPosts; c++) {
31
        for (var e = 0; e <= a.feed.entry[c].link.length - 1; e++) {
32
            if (a.feed.entry[c].link[e].rel == "alternate") {
33
                d[c] = a.feed.entry[c].link[e].href;
34
                break;
35
            }
36
        }
37
    }
38
    skeleton = '<select id="tocSort" onchange="displayMessage(this.options[this.selectedIndex].value);"><option value="0">' + theOptions + '</option><option value="0">' + theSortPosts + '</option><option value="1">' + theSortLabels + '</option></select>';
39
    skeleton += '<table border="1" id="tocTable"><thead><tr><th id="th-1">' + theTitles + '</th><th id="th-2">' + theLabels + '<th id="th-3">' + theDates + '</th>';
40
    skeleton += '</tr></thead>';
41
    skeleton += '<tbody id="toc-903298438493857447454">'; // Unique ID doh...
42
    for (var c = 0; c <= theTotalPosts; c++) {
43
        if (a.feed.entry[c].category.length >= 1) {
44
            for (var e = 0; e <= a.feed.entry[c].category.length - 1; e++) {
45
                skeleton += '<tr>';
46
                skeleton += '<td class="toc-header-col-1">' + '<a href="' + d[c] + '" target="_blank">' + post[c] + "</a>" + '</td>';
47
                skeleton += '<td class="toc-header-col-2">' + '<a href="' + theSiteUrl + "/search/label/" + a.feed.entry[c].category[e].term + '" target="_blank">' + a.feed.entry[c].category[e].term + "</a>" + '</td>';
48
                skeleton += '<td class="toc-header-col-3">' + timepub[c] + '</td>';
49
                skeleton += '</tr>';
50
            }
51
        } else {
52
            skeleton += '<tr>';
53
            skeleton += '<td class="toc-header-col-1">' + '<a href="' + d + '" target="_blank">' + post[c] + "</a>" + '</td>';
54
            skeleton += '<td class="toc-header-col-2">' + theBlankLabels + '</td>';
55
            skeleton += '<td class="toc-header-col-3">' + timepub[c] + '</td>';
56
            skeleton += '</tr>';
57
        }
58
    }
59
    skeleton += '</tbody>';
60
    skeleton += '</table><div style="text-align:right;"><a href="https:////idtutorplus.blogspot.com" target="_blank" style="font:normal bold 8px/normal Arial,Sans-Serif;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.2);" title="Id Tutor Plus">ITP +]</a></div>';
61
    g.innerHTML = skeleton;
62
}
63
​
64
​
65
​
66
function getTextValue(a) {
67
    var b, c = "";
68
    for (b = 0; b < a.childNodes.length; b++) {
69
        if (a.childNodes[b].nodeType == document.TEXT_NODE) {
70
            c += a.childNodes[b].nodeValue;
71
        } else if (a.childNodes[b].nodeType == document.ELEMENT_NODE && a.childNodes[b].tagName == "BR") {
72
            c += " ";
73
        } else {
74
            c += getTextValue(a.childNodes[b]);
75
        }
76
    }
77
    return normalizeString(c);
78
}
79
​
80
function normalizeString(a) {
81
    var whtSpEnds = new RegExp("^\\s*|\\s*$", "g"),
82
        whtSpMult = new RegExp("\\s\\s+", "g");
83
    a = a.replace(whtSpMult, " ").replace(whtSpEnds, "");
84
    return a;
85
}
86
​
87
function compareValues(a, b) {
88
    var c = parseFloat(a),
89
        d = parseFloat(b);
90
    if (!isNaN(c) && !isNaN(d)) {
91
        a = c;
92
        b = d;
93
    }
94
    if (a == b) return 0;
95
    if (a > b) return 1;
96
    return -1;
97
}
98
​
99
function displayMessage(a) {
100
    var b = document.getElementById("toc-903298438493857447454");
101
    if (b.reverseSort == null) b.reverseSort = [];
102
    if (a == b.lastColumn) b.reverseSort[a] = !b.reverseSort[a];
103
    b.lastColumn = a;
104
    var c = b.style.display;
105
    b.style.display = "none";
106
    var d, e, f, g, h, i, j;
107
    for (e = 0; e < b.rows.length - 1; e++) {
108
        h = e;
109
        g = getTextValue(b.rows[e].cells[a]);
110
        for (f = e + 1; f < b.rows.length; f++) {
111
            i = getTextValue(b.rows[f].cells[a]);
112
            j = compareValues(g, i);
113
            if (b.reverseSort[a]) j = -j;
114
            if (j > 0) {
115
                h = f;
116
                g = i;
117
            }
118
        }
119
        if (h > e) {
120
            d = b.removeChild(b.rows[h]);
121
            b.insertBefore(d, b.rows[e]);
122
        }
123
    }
124
    b.style.display = c;
125
    return false;
126
}
127
​
128
if (document.ELEMENT_NODE == null) {
129
    document.ELEMENT_NODE = 1;
130
    document.TEXT_NODE = 3;
131
}
132
​
133
(function () {
134
    var h = document.getElementsByTagName('head')[0],
135
        s = document.createElement('script');
136
    s.src = "" + theSiteUrl.replace(/\/$/, "") + "/feeds/posts/summary?max-results=" + theTotalPosts + "&alt=json-in-script&orderby=published&callback=toc_sort_table";
137
    h.appendChild(s);
138
})();
1
 
1
<div id="toc-container">Memuat...</div>