Reload Page ❖ Tabel Konten Blogger dengan Pilihan Sortir + Komentarweb 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:0px 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
    theComment = "Jumlah Komentar", // Header tabel 4
9
    theBlankLabels = "Tak Berlabel", // Label kosong
10
    theSiteUrl = "https://idtutorplus.blogspot.com", // URL blog kamu
11
    theConfig = "toc-container",
12
    theCmtext = "Komentar";
13
​
14
// Original: https://www.threelas.com
15
// Modified by Id Tutor Plus(https://idtutorplus.blogspot.com)
16
​
17
​
18
function toc_sort_table(a) {
19
    var post = [],
20
        label = [],
21
        timepub = [],
22
        skeleton = "",
23
        g = document.getElementById(theConfig),
24
        b = a.feed.openSearch$totalResults.$t;
25
    if (b < theTotalPosts) theTotalPosts = b - 1;
26
    for (var c = 0; c <= theTotalPosts; c++) {
27
        post[c] = a.feed.entry[c].title.$t;
28
        label[c] = a.feed.entry[c].category[0].term;
29
        timepub[c] = a.feed.entry[c].published.$t.substring(0, 10);
30
    }
31
    var d = [];
32
    var cmnum = [];
33
    for (var c = 0; c <= theTotalPosts; c++) {
34
        for (var e = 0; e <= a.feed.entry[c].link.length - 1; e++) {
35
            if (a.feed.entry[c].link[e].rel == "alternate") {
36
                d[c] = a.feed.entry[c].link[e].href;
37
                break;
38
            }
39
        }
40
        for (var l = 0; l <= a.feed.entry[c].link.length - 1; l++) {
41
            if (a.feed.entry[c].link[l].rel == "replies" && a.feed.entry[c].link[l].type == "text/html") {
42
                cmnum[c] = a.feed.entry[c].link[l].title.split(" ")[0];
43
                break;
44
            }
45
        }
46
    }
47
48
    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>';
49
    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><th id="th-4">' + theComment + '</th>';
50
    skeleton += '</tr></thead>';
51
    skeleton += '<tbody id="toc-09957862729274943614">'; // Unique ID doh...
52
    for (var c = 0; c <= theTotalPosts; c++) {
53
        if (a.feed.entry[c].category.length >= 1) {
54
            for (var e = 0; e <= a.feed.entry[c].category.length - 1; e++) {
55
                skeleton += '<tr>';
56
                skeleton += '<td class="toc-header-col-1">' + '<a href="' + d[c] + '" target="_blank">' + post[c] + "</a>" + '</td>';
57
                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>';
58
                skeleton += '<td class="toc-header-col-3">' + timepub[c] + '</td>';
59
                skeleton += '<td class="toc-header-col-4">' + cmnum[c] + ' ' + theCmtext + '</td>';
60
                skeleton += '</tr>';
61
            }
62
        } else {
63
            skeleton += '<tr>';
64
            skeleton += '<td class="toc-header-col-1">' + '<a href="' + d + '" target="_blank">' + post[c] + "</a>" + '</td>';
65
            skeleton += '<td class="toc-header-col-2">' + theBlankLabels + '</td>';
66
            skeleton += '<td class="toc-header-col-3">' + timepub[c] + '</td>';
67
            skeleton += '<td class="toc-header-col-4">' + cmnum[c] + ' ' + theCmtext + '</td>';
68
            skeleton += '</tr>';
69
        }
70
    }
71
    skeleton += '</tbody>';
72
    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>';
73
    g.innerHTML = skeleton;
74
}
75
​
76
​
77
​
78
function getTextValue(a) {
79
    var b, c = "";
80
    for (b = 0; b < a.childNodes.length; b++) {
81
        if (a.childNodes[b].nodeType == document.TEXT_NODE) {
82
            c += a.childNodes[b].nodeValue;
83
        } else if (a.childNodes[b].nodeType == document.ELEMENT_NODE && a.childNodes[b].tagName == "BR") {
84
            c += " ";
85
        } else {
86
            c += getTextValue(a.childNodes[b]);
87
        }
88
    }
89
    return normalizeString(c);
90
}
91
​
92
function normalizeString(a) {
93
    var whtSpEnds = new RegExp("^\\s*|\\s*$", "g"),
94
        whtSpMult = new RegExp("\\s\\s+", "g");
95
    a = a.replace(whtSpMult, " ").replace(whtSpEnds, "");
96
    return a;
97
}
98
​
99
function compareValues(a, b) {
100
    var c = parseFloat(a),
101
        d = parseFloat(b);
102
    if (!isNaN(c) && !isNaN(d)) {
103
        a = c;
104
        b = d;
105
    }
106
    if (a == b) return 0;
107
    if (a > b) return 1;
108
    return -1;
109
}
110
​
111
function displayMessage(a) {
112
    var b = document.getElementById("toc-09957862729274943614");
113
    if (b.reverseSort == null) b.reverseSort = [];
114
    if (a == b.lastColumn) b.reverseSort[a] = !b.reverseSort[a];
115
    b.lastColumn = a;
116
    var c = b.style.display;
117
    b.style.display = "none";
118
    var d, e, f, g, h, i, j;
119
    for (e = 0; e < b.rows.length - 1; e++) {
120
        h = e;
121
        g = getTextValue(b.rows[e].cells[a]);
122
        for (f = e + 1; f < b.rows.length; f++) {
123
            i = getTextValue(b.rows[f].cells[a]);
124
            j = compareValues(g, i);
125
            if (b.reverseSort[a]) j = -j;
126
            if (j > 0) {
127
                h = f;
128
                g = i;
129
            }
130
        }
131
        if (h > e) {
132
            d = b.removeChild(b.rows[h]);
133
            b.insertBefore(d, b.rows[e]);
134
        }
135
    }
136
    b.style.display = c;
137
    return false;
138
}
139
​
140
if (document.ELEMENT_NODE == null) {
141
    document.ELEMENT_NODE = 1;
142
    document.TEXT_NODE = 3;
143
}
144
​
145
(function () {
146
    var h = document.getElementsByTagName('head')[0],
147
        s = document.createElement('script');
148
    s.src = "" + theSiteUrl.replace(/\/$/, "") + "/feeds/posts/summary?max-results=" + theTotalPosts + "&alt=json-in-script&orderby=published&callback=toc_sort_table";
149
    h.appendChild(s);
150
})();
1
 
1
<div id="toc-container">Memuat...</div>