Membuat Daftar Isi Otomatis Untuk Label Tertentu

Pahamkah sobat akan tujuan dari judul di atas? Sobat mungkin sering menemukan artikel serupa ini dengan kata kunci "Buat daftar isi per label", atau sering pula dengan kata kunci "cara buat daftar isi sitemap". Namun, satu hal yang membedakan cara ini dari cara buat daftar isi yang lain, yaitu cara ini hanya menampilkan artikel-artikel dalam satu kategori atau label tertentu.

Cara seperti ini sebenarnya bisa sobat lakukan secara manual dengan memasukkan link-link artikel secara manual, tapi seperti biasanya, waktu sobat mungkin akan terbuang banyak. Beruntungnya jika sobat hanya punya sedikit artikel... bagaimana jika banyak?? Jadi codepelajar punya solusinya.

Widget ini dilengkapi dengan scroll yang berfungsi menghemat halaman sobat, jadi tak perlu khawatir jika lamannya terlalu banyak untuk dimuat. Bagi sobat yang tertarik untuk membuat daftar isi otomatis pada label tertentu, silakan ikuti tutorial berikut.

Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu

Ada dua pilihan yang dapat sobat pilih dan keduanya sudah codepelajar tes dan berhasil, silahkan pilih salah satunya yang sekiranya menarik untuk blog sobat.

Satu Label

1. Login ke Blogger

2. Pilih menu Layout > Tambahkan gadget > HTML/JavaScript

3. Masukkan kode berikut ini di dalamnya

<div style="overflow:auto; width:auto; height:150px; padding:5px;border:0px solid #000000; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://codepelajar.com/feeds/posts/default/-/ganti-label?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

Catatan:

- height:100px : tinggi scroll box. silahkan sobat ganti sesuai keinginan.

- border:1px solid #e6e4e3 :  adalah ukuran, jenis dan warna dari border. 1px adalah tebal border, solid adalah jenis border dan #e6e4e3 adalah warna border

- font-size : adalah ukuran huruf.

- <ol> : adalah Numbered LIst , sobat bisa menggantinya menjadi bullet list dengan kode <ul>

- Ganti http://codepelajar.com dengan Url blog sobat.

- Ganti tulisan "ganti-label" dengan label yang sobat inginkan. Perhatikan penulisan labelnya. sesuaikan dengan yang terterah, jika satu huruf saja salah penulisannya, makan daftar isinya tak akan muncul. %20 adalah Spasi jadi ganti spasi dengan kode %20.

4. Jika sudah semua silahkan disimpan

Lebih dari satu label

Untuk menampilkan daftar isi lebih dari satu label, misalnya untuk labeln Gadget dan Wordpress, maka kode yang harus sobat pakai adalah seperti berikut

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #e6e4e3; font-size:15px;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script>
<h3>BLOG</h3>
<ol>
<script src="http://codepelajar.com/feeds/posts/default/-/ganti-label?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>SEO BLOG</h3>
<ol>
<script src="http://codepelajar.com/feeds/posts/default/-/ganti-label?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

Sesuaikan tulisan yang "ganti-label"dengan label yang sobat gunakan.

Penutup

Oke mungkin itu saja yang dapat codepelajar sampaikan semoga dengan ini blog sobat akan menjadi lebih SEO dan digemari banyak pengunjung.