Fungsi Daftar isi atau Table of Contents pada blog adalah agar untuk mempermudah pengunjung blog untuk membaca artikel - artikel yang ada di dalam blog tersebut selain itu Daftar isi atau Table of Contents juga bermanfaat untuk mengoptimalkan mesin pencari dan mempermudah robot mesin pencari untuk merayapi halaman blog dengan adanya Daftar isi atau Table of Contents maka semua halaman Blog akan di rayapi oleh Robot, bagi yang punya Blog akan tetapi belum berhasil memunculkan Daftar isi atau Table of Contents di halaman blog ikuti langkah - langkahnya di bawah ini
- Yang pertama Login ke Blogger
- Kemudian pasti kan semua Artikel sudah mempunyai Label, untuk lebih jelasnya seperti gambar di bawah ini.
- Kemudian masuk ke tahap selanjutnya, pada Halaman Dashboard Blogger klik Halaman dan Buat Halaman Baru
- Beri judul Halaman kemudian Pilih HTML dan Copy-Paste Script di bawah ini pada halaman HTML.
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #00ccff; border: 4px groove rgb(0, 0, 0); padding: 5px; text-align: center;">
<a href="https://andihangdihi.blogspot.com/2018/08/TABLE-OF-CONTENTS.html"><b>DAFTAR ISI ~ TABLE OF CONTENTS</b></a></div>
<div style="border: 1px solid #eee; height: 1500px; overflow: auto; padding: 10px;">
<div class="jontor">
<script src="https://rawgit.com/rezamuhamad/rakinfo/master/sitemap.js"></script>
<script src="https://andihangdihi.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=1001&alt=json-in-script&callback=rak_info_Load"></script>
</div>
<style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .rak_info_Label{background:#00ced1;color:#fff;text-decoration:none;display:block;padding:5px 0px 5px 10px;font:13px 'Arial';font-weight:bold;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#fff;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#7289da;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#800000;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:12px 'Arial';padding:0;margin-bottom:2em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.rak_info_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #00ccff; border: 4px groove rgb(0, 0, 0); padding: 5px; text-align: center;">
<a href="https://andihangdihi.blogspot.com/2018/08/TABLE-OF-CONTENTS.html"><b>KLIK NEXT PAGE</b></a></div>
</div>
</div>
<div style="background-color: #00ccff; border: 4px groove rgb(0, 0, 0); padding: 5px; text-align: center;">
<a href="https://andihangdihi.blogspot.com/2018/08/TABLE-OF-CONTENTS.html"><b>DAFTAR ISI ~ TABLE OF CONTENTS</b></a></div>
<div style="border: 1px solid #eee; height: 1500px; overflow: auto; padding: 10px;">
<div class="jontor">
<script src="https://rawgit.com/rezamuhamad/rakinfo/master/sitemap.js"></script>
<script src="https://andihangdihi.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=1001&alt=json-in-script&callback=rak_info_Load"></script>
</div>
<style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .rak_info_Label{background:#00ced1;color:#fff;text-decoration:none;display:block;padding:5px 0px 5px 10px;font:13px 'Arial';font-weight:bold;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#fff;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#7289da;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#800000;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:12px 'Arial';padding:0;margin-bottom:2em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.rak_info_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #00ccff; border: 4px groove rgb(0, 0, 0); padding: 5px; text-align: center;">
<a href="https://andihangdihi.blogspot.com/2018/08/TABLE-OF-CONTENTS.html"><b>KLIK NEXT PAGE</b></a></div>
</div>
</div>
- Tulisan berwarna Merah ganti dengan URL Blog anda, setelah itu klik Publikasikan dan lihat hasilnya.
- Catatan : Biasanya akan muncul 150 Postingan saja untuk menampilkan semua postingan dihalaman daftar isi, kalau di blog ini saya buat dua Page, jika anda berminat membuat dua page caranya buat page baru kemudian ganti saja angka index=1& manjadi index=150&.
- Jika ada yang bisa menjadi kan satu halaman silahkan share di komentar di bawah ini.
- SELAMAT MENCOBA & SEMOGA BERMANFAAT.
Baca juga Artikel di Bawah ini:Blogger