https:////example.com/style.css X#tabbed-toc { margin:5px auto 0; background-color:#292929; border-top:1px solid #222; border-bottom:1px solid #444; overflow:hidden; position:relative; color:#888; } #tabbed-toc .loading {margin:20px 47%;} #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; border-top:1px solid #444; border-bottom:1px solid #222; } #tabbed-toc .toc-tabs li a { display:block; font:normal bold 10px/28px Helmet,Freesans,Sans-Serif; height:28px; overflow:hidden; text-overflow:ellipsis; color:#ccc; border-top:1px solid #222; border-bottom:1px solid #444; text-transform:uppercase; text-decoration:none; padding:0 10px; margin:0 5px; cursor:pointer; } #tabbed-toc .toc-tabs li a:hover { background-color:#222; color:white; padding:0 20px; margin:0 -5px; } #tabbed-toc .toc-tabs li a.active-tab { background-color:#3c3c3c; color:#C4DEF0; font-size:13px; font-weight:bold; border-top:1px solid #444; border-bottom:1px solid #444; border-right:1px solid #222; -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; padding:0 15px; margin:-1px -1px 0 0; } #tabbed-toc .toc-content,#tabbed-toc .divider-layer { width:80%; float:right; background-color:#333; border-left:1px solid #222; border-right:1px solid #444; -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/normal Helmet,Freesans,Sans-Serif; border-bottom:1px solid #444; } #tabbed-toc .panel li a.item-title { display:block; position:relative; font-weight:normal; font-size:13px; color:#999; border-top:1px solid #444; border-bottom:1px solid #222; line-height:28px; height:28px; padding:0 12px; text-transform:uppercase; 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.bold time {float:left;} #tabbed-toc .panel li .summary { display:block; height:50px; padding:10px 12px 10px; font-style:italic; border-top:1px solid #444; border-bottom:1px solid #222; 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 #3c3c3c; background-color:#292929; } #tabbed-toc .panel li.bold { float:left; width:50%; -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444; -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444; box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444; } #tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus { color:#999; outline:none; background-color:#3c3c3c; border-left:4px solid #066696; } #tabbed-toc .panel li.bold a.item-title:hover { background-color:#3c3c3c; -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444; -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444; box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444; } #tabbed-toc .panel li .itemfoot { clear:both; padding:5px 10px; color:#666; border-top:1px solid #444; border-bottom:1px solid #222; overflow:hidden; position:relative; } #tabbed-toc .panel li .itemfoot a.itemrmore { font-weight:bold; color:#3B5998; text-decoration:none; position:absolute; top:5px; right:10px; } #tabbed-toc .panel li .itemfoot a.itemrmore:hover { color:#555; background-color:transparent; text-decoration:none; border-color:transparent; }https:////example.com/script.js Xvar tabbedTOC = { blogUrl: "https:////js-fiddle.blogspot.com", containerId: "tabbed-toc", activeTab: 1, showDates: true, showSummaries: true, numChars: 50, showThumbnails: true, thumbSize: 40, noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", monthNames: ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"], newTabLink: true, maxResults: 99999, preload: onload, sortAlphabetically: true, showNew: false, rmoreText: "Selengkapnya ►", newText: " - New!" }; var h = document.getElementsByTagName('body')[0], s = document.createElement('script'); s.type = 'text/javascript'; s.src = 'https://cdn.statically.io/gh/idtutorplus/JSFiddle/b516bcee/js/toc.v1.js'; h.appendChild(s)