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&alt=json-in-script&callback=showrecentposts&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:
| <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&alt=json-in-script&callback=showrecentposts&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&start-index=1&max-results=1000&orderby=published&alt=json-in-script&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:
| <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&alt=json-in-script&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.
