pusatdata

Cara Membuat Daftar Isi Blogspot Model 2

Apr 18th, 2020
55
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.12 KB | None | 0 0
  1. <style type="text/css">
  2. .tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
  3. position:relative;color:#333;border: 1px solid #9C9C9C;}
  4. .tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
  5. color:white;}
  6. .tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
  7. .tabbed-toc .toc-tabs {width:20%;float:left;}
  8. .tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
  9. padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
  10. .tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
  11. .tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
  12. z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
  13. .tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
  14. .tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
  15. .tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
  16. .tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
  17. text-decoration:none;outline:none;overflow:hidden;}
  18. .tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
  19. .tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
  20. border-bottom:4px solid #275827;overflow:hidden;}
  21. .tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
  22. width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
  23. .tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
  24. .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 {
  25. background-color:#333;color:white;outline:none;}
  26. .tabbed-toc .panel li.bold a:hover,
  27. .tabbed-toc .panel li.bold a:hover time {background-color:#222}
  28. .post ol li::before {content: none;}
  29. .post ol li {margin:0;}
  30. @media (max-width:700px) {
  31. .tabbed-toc {border:2px solid #333}
  32. .tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
  33. .tabbed-toc .toc-tabs li {display:inline;float:left;}
  34. .tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
  35. .tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
  36. .tabbed-toc .toc-content {border:none}
  37. .tabbed-toc .toc-line,
  38. .tabbed-toc .panel li time {display:none}
  39. .tabbed-toc .panel li a{height: auto;}
  40. </style>
  41. <div class="tabbed-toc" id="tabbed-toc">
  42. <span class="loading">Memuat…</span></div>
  43. <script>
  44. var tabbedTOC = {
  45. blogUrl: "/", // Blog URL
  46. containerId: "tabbed-toc", // Container ID
  47. activeTab: 1, // The default active tab index (default: the first tab)
  48. showDates: false, // `true` to show the post date
  49. showSummaries: false, // `true` to show the posts summaries
  50. numChars: 200, // Number of summary chars
  51. showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
  52. thumbSize: 40, // Thumbnail size
  53. noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
  54. monthNames: [ // Array of month names
  55. "Januari",
  56. "Februari",
  57. "Maret",
  58. "April",
  59. "Mei",
  60. "Juni",
  61. "Juli",
  62. "Agustus",
  63. "September",
  64. "Oktober",
  65. "November",
  66. "Desember"
  67. ],
  68. newTabLink: true, // Open link in new window?
  69. maxResults: 99999, // Maximum post results
  70. preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
  71. sortAlphabetically: true, // `false` to sort posts by published date
  72. showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
  73. newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
  74. };
  75. </script>
  76. <script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>
  77.  
  78. =============
  79.  
  80. Kode JS-nya
  81.  
  82. /*!
  83. * Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
  84. * Free for change but keep the original attribution.
  85. * URL: https://plus.google.com/108949996304093815163/about
  86. */
  87. !function(a,b){var c=(new Date).getTime(),d={blogUrl:"http://dte-feed.blogspot.com",containerId:"tabbed-toc",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' &ndash; <em style="color:red;">Baru!</em>'};if("undefined"==typeof tabbedTOC)tabbedTOC=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTOC[e]?tabbedTOC[e]:d[e];a["clickTabs_"+c]=function(a){for(var b=document.getElementById(d.containerId),c=b.getElementsByTagName("ol"),e=b.getElementsByTagName("ul")[0],f=e.getElementsByTagName("a"),g=0,h=c.length;h>g;++g)c[g].style.display="none",c[parseInt(a,10)].style.display="block";for(var i=0,j=f.length;j>i;++i)f[i].className="",f[parseInt(a,10)].className="active-tab"},a["showTabs_"+c]=function(e){for(var f=parseInt(e.feed.openSearch$totalResults.$t,10),g=d,h=e.feed.entry,i=e.feed.category,j="",l=0;l<(g.showNew===!0?5:g.showNew)&&l!==h.length;++l)h[l].title.$t=h[l].title.$t+(g.showNew!==!1?g.newText:"");h=g.sortAlphabetically?h.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):h,i=g.sortAlphabetically?i.sort(function(a,b){return a.term.localeCompare(b.term)}):i,j='<span class="toc-line"></span><ul class="toc-tabs">';for(var m=0,n=i.length;n>m;++m)j+='<li class="toc-tab-item-'+m+'"><a onclick="clickTabs_'+c+"("+m+');return false;" onmousedown="return false;" href="javascript:;">'+i[m].term+"</a></li>";j+="</ul>",j+='<div class="toc-content">';for(var o=0,n=i.length;n>o;++o){j+='<ol class="panel" data-category="'+i[o].term+'"',j+=o!=g.activeTab-1?' style="display:none;"':"",j+=">";for(var p=0;f>p&&p!==h.length;++p){for(var q,r=h[p],s=r.published.$t,t=g.monthNames,u=r.title.$t,v=("summary"in r&&g.showSummaries===!0?r.summary.$t.replace(/<br *\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.numChars)+"&hellip;":""),w=("media$thumbnail"in r&&g.showThumbnails===!0?'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+r.media$thumbnail.url.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+g.noThumb.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>'),x=r.category||[],y=g.showDates?'<time datetime="'+s+'" title="'+s+'">'+s.substring(8,10)+" "+t[parseInt(s.substring(5,7),10)-1]+" "+s.substring(0,4)+"</time>":"",z=0,A=r.link.length;A>z;++z)if("alternate"===r.link[z].rel){q=r.link[z].href;break}for(var B=0,C=x.length;C>B;++B){var D=g.newTabLink?' target="_blank"':"";x[B].term===i[o].term&&(j+='<li title="'+x[B].term+'"',j+=g.showSummaries?' class="bold"':"",j+='><a href="'+q+'"'+D+">"+u+y+"</a>",j+=g.showSummaries?'<span class="summary">'+w+v+'<span style="display:block;clear:both;"></span></span>':"",j+="</li>")}}j+="</ol>"}j+="</div>",j+='<div style="clear:both;"></div>',b.getElementById(g.containerId).innerHTML=j,a["clickTabs_"+c](g.activeTab-1)};var f=b.getElementsByTagName("head")[0],g=b.createElement("script");g.src=d.blogUrl.replace(/\/+$|[\?&#].*$/g,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+d.maxResults+"&orderby=published&callback=showTabs_"+c,"onload"!==d.preload?a.setTimeout(function(){f.appendChild(g)},d.preload):a.onload=function(){f.appendChild(g)}}(window,document);
Add Comment
Please, Sign In to add comment