Home » Cara Membuat Daftar Isi Otomatis Di Blogger

Cara Membuat Daftar Isi Otomatis Di Blogger

cara+membuat+daftar+isi+otomatis+di+blogger
Cara Membuat Daftar Isi Di Blogger

Cara Membuat Daftar Isi Otomatis Di Blogger – Daftar isi merupakan bagian penting dalam sebuah blog atau website. Dengan adanya daftar isi, maka memudahkan pengunjung untuk menelusuri seluruh postingan blog.

Pada umumnya, daftar isi pada sebuah blog berisi judul-judul artikel yang telah dipublikasikan. Halaman daftar isi ini akan menampilkan secara otomatis seluruh judul artikel, bisa berdasarkan tanggal publish atau sesuai lebel.

Di blogger, untuk membuat daftar isi kita perlu menggunakan kode html karena tidak tersedia plugin seperti wordPress. Berikut akan dijelaskan bagaimana cara membuat halaman daftar isi otomatis di blogger.

Cara Membuat Daftar Isi Otomatis Di Blogger

Terdapat berbagai variasi kode untuk membuat daftar isi di blog. Misalnya menampilkan dengan list, menambahkan tanggal, hingga dikategorikan sesuai label. Untuk langkah-langkah membuatnya yaitu sebagai berikut:

  • Silahkan masuk ke dashboard blogger, kemudian pilih menu Halaman dan klik Tambahkan Halaman Baru
  • Tulis judul halaman sesuai keinginan. Misalnya Daftar Isi
  • Setelah itu, pilih opsi menulis Tampilan HTML. Kemudian salin kode di bawah ini dan tempelkan di area menulis halaman

Daftar Isi Dengan Judul Postingan

Kode di bawah ini akan menampilkan daftar isi berupa judul artikel saja.

<script type=”text/javascript”> var numposts = 150; var standardstyling = true; function showrecentposts(json) { for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == “alternate”) { posturl = entry.link[k].href; break; } } posttitle = posttitle.link(posturl); if (standardstyling) document.write(“<li>”); document.write(posttitle); } if (standardstyling) document.write(“</li>”); } </script></p> <ul> <script src=”/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999″></script> </ul>

Daftar Isi Dengan List Angka

Jika ingin mengganti list daftar isi dengan angka, ubah elemen ul dengan ol pada kode di atas. Contohnya seperti ini:

Baca Lainnya :   Cara Menambahkan Gambar Di Blog WordPress
<script type=”text/javascript”> var numposts = 150; var standardstyling = true; function showrecentposts(json) { for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == “alternate”) { posturl = entry.link[k].href; break; } } posttitle = posttitle.link(posturl); if (standardstyling) document.write(“<li>”); document.write(posttitle); } if (standardstyling) document.write(“</li>”); } </script> <ol> <script src=”/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999″></script> </ol>

Daftar Isi Dengan Tanggal Publish

Jika ingin menambhakan tanggal publish pada tampilan daftar isi, maka kodenya seperti di bawah ini:

<script> var numposts = 1000; var showpostdate = true; </script> <script> function boss(json) { document.write(‘<ul>’); for (var i = 0; i < numposts; i++) { document.write(‘<li>’); var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == ‘alternate’) { posturl = entry.link[k].href; posttitle = posttitle.link(posturl); var postdate = entry.published.$t; var cdyear = postdate.substring(0,4); var cdmonth = postdate.substring(5,7); var cdday = postdate.substring(8,10); var monthnames = new Array(); monthnames[1] = “Jan”; monthnames[2] = “Feb”; monthnames[3] = “Mar”; monthnames[4] = “Apr”; monthnames[5] = “May”; monthnames[6] = “Jun”; monthnames[7] = “Jul”; monthnames[8] = “Aug”; monthnames[9] = “Sep”; monthnames[10] = “Oct”; monthnames[11] = “Nov”; monthnames[12] = “Dec”; } } document.write(posttitle); if (showpostdate == true) document.write(‘ ‘ + cdday + ‘ – ‘ + monthnames[parseInt(cdmonth,10)] + ‘ – ‘ + cdyear); (‘</li>’); } (‘</ul>’); } </script> <script src=”https://contoh.blogspot.com/atom.xml?redirect=false&amp;start-index=1&amp;max-results=1000&amp;orderby=published&amp;alt=json-in-script&amp;callback=boss”></script>

Silahkan ganti https://contoh.blogspot.com dengan alamat blog Anda

Daftar Isi Berdasarkan Label

Jika ingin menampilkan daftar isi berdasarkan label, maka kodenya adalah seperti di bawah ini:

Baca Lainnya :   Cara Memperbaiki Blog Ditolak Adsense
<style type=”text/css”> #toc{width:99%;margin:5px auto;border:1px solid #cccccc;box-shadow:4px 4px 4px -2px rgba(0,0,0, 0.2);} .labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background: #225375;border:1px solid #2D96DF;border-radius:4px;box-shadow:3px 3px 1px #bbb;display:block;} .labl a{color:#fff;} .labl:first-letter{text-transform:uppercase;} .new{color:#FF5F00;font-weight:bold;font-style:italic;} .postname{font-weight:normal;background:#fff;margin-left: 35px;} .postname li{border-bottom: #ddd 1px dotted;margin-right:5px} </style></p> <div id=”toc”> <script src=”https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js” type=”text/javascript”></script> <script src=”/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc”></script> </div>
  • Setelah memilih salah satu kode di atas kemudian klik Pratinjau untuk melihatnya
  • Jika sudah cocok, klik Publikasikan
  • Langkah berikutnya adalah mengedit Menu Halaman Statis untuk menambahkan Daftar Isi yang telah dibuat

Kode-kode di atas diambil dari berbagai sumber di google pencarian. Silahkan pilih salah satu yang sesuai dan terapkan di blog Anda.

Demikianlah informasi mengenai bagaimana membuat daftar isi otomatis di blogger. Semoga bermanfaat.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top