Cara Membuat Daftar Isi Otomatis Pada Label Tertentu

Cara Membuat Daftar Isi Otomatis Pada Label Tertentu, Hai sahabat Reza, pada kesempatan kali ini saya akan membuat postingan tentang tutorial blogging, yaitu Cara Membuat Daftar Isi Otomatis Pada Label Tertentu setelah kemarin Tadi saya posting,Cara menghilangkan link berlangganan. Dan sekarang apakah sahabat sudah tahu apa itu daftar isi?Daftar isi adalah tempat dimana postingan suatu blog yang disatukan menjadi satu halaman atau widget yang menjadi terdaftar dan terurut (namanya juga daftar isi) atau daftar isi dalam bahasa inggrisnya sitemap (untuk blog sahabat bila berbahasa inggris). Tapi yang saya posting ini untuk label tertentu, misalnya hanya untuk label berita saja, atau kesehatan saja, dsb.

Apakah Sahabat ingin melihat contohnya?, berikut ini contohnya:

Widget ini sudah dipasangi scroll yang berfungsi menghemat halaman sahabat. Bagi sahabat yang ingin membuat daftar isi otomatis pada label tertentu silahkan ikuti tutorial berikut ini:

Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu

1. Login atau masuk ke akun blogger sahabat.

2. Klik Tata Letak -> Tambah Gadget -> HTML/Javascript . Tetapi untuk desain blogger lama adalah sebagai berikut: Rancangan -> Elemen laman -> Tambah Gadget ->HTML/Javascript

3. Masukkan kode dibawah ini kedalam kotak yang di sediakan., kemudian berikan judul bebas sesuai sahabat inginkan.

<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='https://daftarisidiaz.googlecode.com/files/postlabel%281%29.js'></script><ol>

<script src="http://reza-bahdim.blogspot.com/feeds/posts/default/-/Tutorial%20Blogging?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>

</ol>

</ol></div>

Keterangan! WAJIB dibaca 

• width:auto = adalah menunjukkan bahwa ukuran lebar scroll box akan menyesuaikan dengan lebar sidebar.
• height:100px = adalah menunjukan ukuran tinggi scroll box sebesar 100px, dan ukurannya bisa ganti sesuai keinginan sahabat.
• border:1px solid #e6e4e3 =  adalah menunjukan ukuran, jenis dan warna dari border. 1px adalah tebal border, solid adalah jenis border ( daftar jenis border bisa sahabat temui, klik disini!) dan #e6e4e3 adalah warna border.( kode warna bisa sahabat temui,klik disini! )
• font-size = adalah menunjukan ukuran huruf.
• var numposts = 100; = adalah jumlah maksimal list yang akan ditampilkan, apabila postingan anda dalam label tertentu sudah melebihi 100, ganti 100 menjadi 200 atau selebihnya.
• <ol> = adalah menunjukan list nomor atau numbered list , sahabat bisa menggantinya menjadi bullet list dengan kode <ul>
• http://reza-bahdim.blogspot.com adalah menunjukan url blog ini, jadi ganti dengan alamat atau url blog sahabat.
• Tutorial%20Blogging  adalah menunjukan label, jadi ganti dengan label yang sahabat inginkan. Perhatikan penulisan labelnya. sesuaikan dengan yang label yang ada, dan jika satu huruf saja salah penulisannya, maka daftar isinya tidak akan muncul. 
• %20 adalah menunjukan Spasi, jadi ganti spasi dengan kode %20.

3. Klik simpan. Selesai :)

Untuk menampilkan daftar isi lebih dari satu label, misalnya untuk label Tutorial Blogging dan Tutorial Komputer, maka kode html yang harus sahabat gunakan adalah seperti dibawah ini:

<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>Tutorial Komputer</h3>
<ol><script type='text/javascript' src='https://daftarisidiaz.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://reza-bahdim.blogspot.com/feeds/posts/default/-/Tutorial%20Komputer?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>Tutorial Blogging</h3>
<ol><script type='text/javascript' src='https://daftarisidiaz.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://reza-bahdim.blogspot.com/feeds/posts/default/-/Tutorial%Blogging?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>

</ol></div>

Keterangan :

• Sesuaikan tulisan yang berwarna merah dengan url blog sahabat.
• Sesuaikan tulisan yang berwarna biru dengan label yang akan sahabat gunakan.

Sekian Cara Membuat Daftar Isi Otomatis Pada Label Tertentu