Reload Page ❖ Daftar Isi Tabulasi (Simple)web created
Css
Jquery
Html
Result
Show Result

Edit in JSFiddle

xxxxxxxxxx
 
​

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

​x
 
1
#tabbed-toc {
2
  margin:5px auto 0;
3
  background-color:#292929;
4
  border-top:1px solid #222;
5
  border-bottom:1px solid #444;
6
  overflow:hidden;
7
  position:relative;
8
  color:#888;
9
}
10
#tabbed-toc .loading {margin:20px 47%;}
11
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
12
  margin:0 0;
13
  padding:0 0;
14
  list-style:none;
15
}
16
#tabbed-toc .toc-tabs {
17
  width:20%;
18
  float:left;
19
  border-top:1px solid #444;
20
  border-bottom:1px solid #222;
21
}
22
#tabbed-toc .toc-tabs li a {
23
  display:block;
24
  font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;
25
  height:28px;
26
  overflow:hidden;
27
  text-overflow:ellipsis;
28
  color:#ccc;
29
  border-top:1px solid #222;
30
  border-bottom:1px solid #444;
31
  text-transform:uppercase;
32
  text-decoration:none;
33
  padding:0 10px;
34
  margin:0 5px;
35
  cursor:pointer;
36
}
37
#tabbed-toc .toc-tabs li a:hover {
38
  background-color:#222;
39
  color:white;
40
  padding:0 20px;
41
  margin:0 -5px;
42
}
43
#tabbed-toc .toc-tabs li a.active-tab {
44
  background-color:#3c3c3c;
45
  color:#C4DEF0;
46
  font-size:13px;
47
  font-weight:bold;
48
  border-top:1px solid #444;
49
  border-bottom:1px solid #444;
50
  border-right:1px solid #222;
51
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
52
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
53
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
54
  position:relative;
55
  z-index:5;
56
  padding:0 15px;
57
  margin:-1px -1px 0 0;
58
}
59
#tabbed-toc .toc-content,#tabbed-toc .divider-layer {
60
  width:80%;
61
  float:right;
62
  background-color:#333;
63
  border-left:1px solid #222;
64
  border-right:1px solid #444;
65
  -webkit-box-sizing:border-box;
66
  -moz-box-sizing:border-box;
67
  box-sizing:border-box;
68
}
69
#tabbed-toc .divider-layer {
70
  float:none;
71
  display:block;
72
  position:absolute;
73
  top:0;
74
  right:0;
75
  bottom:0;
76
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
77
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
78
  box-shadow:0 0 7px rgba(0,0,0,.7);
79
}
80
#tabbed-toc .panel {
81
  position:relative;
82
  z-index:5;
83
  font:normal normal 10px/normal Helmet,Freesans,Sans-Serif;
84
  border-bottom:1px solid #444;
85
}
86
#tabbed-toc .panel li a.item-title {
87
  display:block;
88
  position:relative;
89
  font-weight:normal;
90
  font-size:13px;
91
  color:#999;
92
  border-top:1px solid #444;
93
  border-bottom:1px solid #222;
94
  line-height:28px;
95
  height:28px;
96
  padding:0 12px;
97
  text-transform:uppercase;
98
  text-decoration:none;
99
  outline:none;
100
  overflow:hidden;
101
}
102
#tabbed-toc .panel li time {
103
  display:block;
104
  font-style:italic;
105
  font-weight:normal;
106
  font-size:10px;
107
  color:#666;
108
  float:right;
109
}
110
#tabbed-toc .panel li.bold time {float:left;}
111
#tabbed-toc .panel li .summary {
112
  display:block;
113
  height:50px;
114
  padding:10px 12px 10px;
115
  font-style:italic;
116
  border-top:1px solid #444;
117
  border-bottom:1px solid #222;
118
  overflow:hidden;
119
}
120
#tabbed-toc .panel li .summary img.thumbnail {
121
  float:left;
122
  display:block;
123
  margin:0 8px 0 0;
124
  padding:4px 4px;
125
  width:72px;
126
  height:72px;
127
  border:1px solid #3c3c3c;
128
  background-color:#292929;
129
}
130
#tabbed-toc .panel li.bold {
131
  float:left;
132
  width:50%;
133
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
134
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
135
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
136
}
137
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus {
138
  color:#999;
139
  outline:none;
140
  background-color:#3c3c3c;
141
  border-left:4px solid #066696;
142
}
143
#tabbed-toc .panel li.bold a.item-title:hover {
144
  background-color:#3c3c3c;
145
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
146
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
147
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
148
}
149
#tabbed-toc .panel li .itemfoot {
150
  clear:both;
151
  padding:5px 10px;
152
  color:#666;
153
  border-top:1px solid #444;
154
  border-bottom:1px solid #222;
155
  overflow:hidden;
156
  position:relative;
157
}
158
#tabbed-toc .panel li .itemfoot a.itemrmore {
159
  font-weight:bold;
160
  color:#3B5998;
161
  text-decoration:none;
162
  position:absolute;
163
  top:5px;
164
  right:10px;
165
}
166
#tabbed-toc .panel li .itemfoot a.itemrmore:hover {
167
  color:#555;
168
  background-color:transparent;
169
  text-decoration:none;
170
  border-color:transparent;
171
}
172
​
xxxxxxxxxx
 
​

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

36
 
1
var tabbedTOC = {
2
    blogUrl: "https:////js-fiddle.blogspot.com", // Blog URL
3
    containerId: "tabbed-toc", // Container ID
4
    activeTab: 1, // The default active tab index (default: the first tab)
5
    showDates: false, // `true` to show the post date
6
    showSummaries: false, // `true` to show the posts summaries
7
    numChars: 200, // Number of summary chars
8
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
9
    thumbSize: 40, // Thumbnail size
10
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
11
    monthNames: [ // Array of month names
12
        "Januari",
13
        "Februari",
14
        "Maret",
15
        "April",
16
        "Mei",
17
        "Juni",
18
        "Juli",
19
        "Agustus",
20
        "September",
21
        "Oktober",
22
        "November",
23
        "Desember"
24
    ],
25
    newTabLink: true, // Open link in new window?
26
    maxResults: 99999, // Maximum post results
27
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
28
    sortAlphabetically: true, // `false` to sort posts by published date
29
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
30
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
31
};
32
var h = document.getElementsByTagName('body')[0],
33
    s = document.createElement('script');
34
s.type = 'text/javascript';
35
s.src = 'https://cdn.statically.io/gh/idtutorplus/JSFiddle/b516bcee/js/toc.v1.js';
36
h.appendChild(s)
1
 
1
<div id="tabbed-toc"><span class="loading">Memuat...</span></div>