cara membuat daftar isi Terbaru di blog

Bagaimana cara membuat daftar isi menurut label? ternyata cukup mudah sekali sobh.. hanya dengan menambahkan sedikit kode-kode yang saya dapatkan dari blogger cewek yaitu arlinadesign. Hehe... dulu saya pernah share Cara membuat daftar isi sederhana dan banyak sekali yang mengunjungi artikel tersebut.

Semoga saja artikel ini sama seperti artikel saya sebelumnya dan dapat memberikan manfaat. Mungkin anda sudah tahu ya apa fungsi daftar isi menurut label ini, untuk itu langsung saja kita menuju tutorialnya :

1. Buka blogger.com
2. Klik judul blog anda...
3. Setelah itu pilih laman - klik lagi laman baru
4. Tambahkan kode widget dibawah ini pada tab HTML disudut kiri.

<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#222;color:#ddd;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.1)}
.table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.table-of-content .toc-header:hover{background-color:#3a3a3a}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{background:#3a3a3a;color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#222!important;transition:initial}
.table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#666;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
url: 'http://viennatheme.blogspot.com/',
containerId: 'table-of-content',
showNew: 15,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>

5. Cara terakhir silahkan klik Simpan.

Nah, cukup mudah sekali bukan sobh!Untuk contoh tampilan daftar isi ini silahkan lihat link ini: Contoh tampilan daftar isi menurut label Bagaimana? pastinya keren banget kan bro / sist :D

Ya udah, mungkin sampai disini saja tutorial saya kali ini, semoga bisa bermanfaat bagi anda yang sedang mencari-cari tutorial ini. Terima kasih...

Source :

arlinadesign.blogspot.com/2015/04/menerapkan-daftar-isi-menurut-label.html