Bagaimana, menarik bukan ? kalau ingin mencoba ikuti langkah dibawah ini.
- Login dengan akun masing-masing atau klik disini
- Klik laman, buat laman baru
- Kopi dan tempel kode dibawah ini pada mode HTML
<style scoped="" type="text/css">
#head-tab{background:#F78181;padding:15px 20px;margin:0;color:#fff;font-size:16px;text-align:center;}
#tabbed-toc{margin:0 auto;background-color:#777;overflow:hidden;position:relative;color:#fff;border-left:5px solid #F78181}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0;padding:0;list-style:none}
#tabbed-toc .toc-tabs{width:20%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font-size:14px;font-family:Helmet,Freesans,Sans-Serif;height:30px;overflow:hidden;text-overflow:ellipsis;color:#fafafa;text-transform:uppercase;text-decoration:none;padding:6px 12px;cursor:pointer}#tabbed-toc .toc-tabs li a:hover{background-color:#666;color:white}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#F5A9A9;color:white;position:relative;z-index:5;margin:0 -1px 0 0}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:70%;float:right;background-color:#fafafa;border:1px solid #fafafa}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:14px;color:#7f8c8d;line-height:20px;height:30px;padding:6px 12px;text-decoration:none;outline:0;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 .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:1px solid #2c3e50;overflow:hidden}
#tabbed-toc .panel li:nth-child(even){background-color:#fafafa}
#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{background-color:#fafafa;color:#e06666;outline:0}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#36424a}
@media(max-width:700px){
#tabbed-toc{border:1px solid #ccc}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}
#tabbed-toc .toc-tabs li{display:inline;float:left}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#777}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#FE2E2E;color:#fafafa}
#tabbed-toc .toc-content{border:0}#tabbed-toc .panel li a{font-size:12px;line-height:20px;height:20px;padding:0 12px}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>
<div id="head-tab">
DAFTAR ISI INFOALYA.COM</div>
<div id="tabbed-toc">
</div>
<script>
var tabbedTOC = {
blogUrl: "https://www.infoalya.com", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: " <em style='color:#F2784B;'>New</em>" // HTML for the "New!" text
};
</script>
<script async="async" src="https://cdn.staticaly.com/gh/samhidayat/javas/12ab7095/sitemap2.js"></script>
Untuk URL infoalya.com ganti dengan URL yang diinginkan
tulisan DAFTAR ISI INFOALYA.COM sesuaikan dengan selera masing-masing
tulisan DAFTAR ISI INFOALYA.COM sesuaikan dengan selera masing-masing
Sumber :
Mungkin itu dulu yang admin sampaikan, semoga membawa manfaathttps://www.samsury.id/2015/10/cara-membuat-daftar-isi-ala-samsury-blog.html