Daftar Isi ala Samsury Blog

Daftar Isi ala Samsury Blog

Daftar Isi ala Samsury Blog

infoalya.com
Assalamu'alaikum sahabat infoalya.com buat daftar isi lagi nih, tapi kali ini ala samsury blog, lihat demo dulu ya....


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://virlyzn.googlecode.com/svn/isiblog.js"></script>

Untuk URL infoalya.com ganti dengan URL yang diinginkan
tulisan DAFTAR ISI INFOALYA.COM sesuaikan dengan selera masing-masing

Sumber : https://www.samsury.id/2015/10/cara-membuat-daftar-isi-ala-samsury-blog.html
Mungkin itu dulu yang admin sampaikan, semoga membawa manfaat

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×