Cara membuat daftar isi perlabel secara manual dan otomatis

Salam Pembaca Blog di label tutorial blog, Membuat sebuah daftar isi merupakan hal sangat penting karena para pengunjung blog anda bisa dengan mudah mencari artikel/konten yang ada di blog anda. Ada dua cara untuk tutorial kali ini yaitu membuat daftar isi perlabel secara otomatis dan secara manual. Jika anda berminat untuk membuatnya silahkan ikuti tutorial berikut ini :

1. Silahkan masuk di Blogger anda, klik Rancangan > Elemen Laman > Tambah Gadget. Kemudian pilih HTML/JavaScript.

2. Berikan judulnya
(“Daftar isi” “ isi blog ini” ) sesuai yang diinginkan, lalu copy kode di bawah ini dan paste di Ruangan HTML/JavaScript.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;"><ol><script style="text/javascript">var numposts = 100;var standardstyling = true;</script><script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script> <ol><script src="http://www.label-tutorial.blogspot.com/feeds/posts/default/-/Tutorial%20membuat%20blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol></ol></div>

Keterangan :    width:auto; menunjukkan lebar scroll box akan mengikuti lebar sidebar.

height:100px; menunjukkan tinggi scroll box setinggi 100 pixsel. Silakan diganti angkanya untuk mengubah tingginya.

border:1px solid #e6e4e3; menunjukkan garis keliling (border) scroll box bergaya solid setebal 1 piksel berwarna #e6e4e3. Silakan disesuaikan dengan keadaan template anda.

<ol> menunjukkan numbered list, kalau ingin menjadi bullet list silakan diganti dengan <ul>.

Ganti http://www.label-tutorial.blogspot.com dengan alamat blog anda.

Ganti Tutorial%20membuat%20blog dengan label yang anda  inginkan. Penulisan label harus sesuai dengan yang tertera di blog. Perhatikan huruf besar-kecilnya dan spasi diganti dengan %20.

3. Klik tombol SIMPAN.
4. Pindahkan elemen tadi ke tempat yang anda inginkan.
5. Klik tombol SIMPAN.

Jika ingin menampilkan lebih dari satu label, silakan ditambahkan script untuk labelnya. Misalnya saya akan menampilkan label Tutorial membuat blog dan komputer maka script-nya akan menjadi seperti di bawah ini.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;"><ol><script style="text/javascript">var numposts = 100;var standardstyling = true;</script><script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script> <h3> Tutorial blog</h3><ol><script src="http://www.label-tutorial.blogspot.com/feeds/posts/default/-/Tutorial%20membuat%20blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol></ol><br/ >
<h3>Komputer</h3><ol><script src="http://www.label-tutorial.blogspot.com/feeds/posts/default/-/komputer?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol></ol></div>

Cara di atas merupakan cara yang menggunakan script. Jika anda tertarik untuk menggunakan cara manual seperti yang saya terapkan pada blog ini dengan cara manual ini blog anda tidak akan menjadi lelet/lemot saat dibuka tidak seperti halnya menggunakan script, silakan simak baik – baik langkah-langkahnya di bawah ini. Sebelum mengikuti cara ini, silakan anda ikuti langkah berikut :

1. Buka daftar isi blog yang tadi anda buat.
2. Blok posting-posting dari label mana yang akan di ambil. Misalnya saya mengambil label Tutorial membuat blog  juga seperti contoh menggunakan script. Setelah diblok, lalu klik kanan dan pilih Lihat Kode Sumber Teks yang Dipilih. Atau tekan CTRL+U

3. Copy semua teks yang muncul di jendela Sumber DOM yang Dipilih.
4. Masuk ke akun Blogger anda.
5. Klik Rancangan > Elemen Laman > Tambah Gadget.
6. Pilih HTML/JavaScript.
7. Beri judul, paste kode tadi di Konten. Silakan diedit dan hapus kata-kata yang tidak diperlukan (seperti kata "New" dan lain-lain) sehingga susunannya akan menjadi seperti di bawah ini.

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-blog-di-bloggerblogspot.html">Cara membuat blog di blogger</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-setting-blog-di-blogger_25.html">Cara Setting Blog Di blogger</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-upload-video-diblog.html">Cara Upload Video diBlog</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-background-di-postingan.html">Cara membuat background di postingan blog</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-mengganti-template-di-blogger.html">Cara Mengganti Template di blogger</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membackup-template-blog-di-blogger.html">Cara membackup template blog di blogger</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-custom-domain-di-blogger.html">Cara Custom Domain di Blogger</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-kategori-label.html">Cara membuat kategori label</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-dan-memasang-favicon.html">Cara membuat dan memasang Favicon</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/membuat-favicon-atau-logo-blog-di.html">Membuat favicon atau logo blog di photoshop</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-daftar-di-feedburnercom.html">Cara Daftar di Feedburner.com</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-banner-animasi-di-blog.html">Cara Membuat Banner Animasi di blog</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-pasang-banner-di-header-blog.html">Cara Pasang Banner di Header Blog</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-menyembunyikan-judul-blog-di.html">Cara Menyembunyikan Judul Blog di Header</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-menu-dropdown-di-blog.html">Cara Membuat Menu Dropdown di Blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-readmore-pada-blog-1.html">Cara Membuat Readmore pada blog (1)</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-text-area-pada-blog.html">Cara Membuat Text Area pada blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-mengubah-lebar-kolom-template.html">Cara Mengubah Lebar Kolom Template</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-pasang-buku-tamu-di-blog.html">Cara Pasang Buku Tamu di Blog</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-pasang-kode-iklan-adsensecamp-di.html">Cara Pasang Iklan AdsenseCAMP di Bawah Posting</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-pasang-widget-jam-di-sidebar.html">Cara Pasang widget Jam di Sidebar</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-agar-postingan-tidak-bisa-dicopy.html">Cara agar postingan tidak bisa dicopy paste</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-edit-blog-secara-offline.html">Cara edit Blog Secara Offline</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-memasang-widgettool-untuk-user.html">Cara memasang widget/tool untuk User Online</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-efek-salju-pada-blog.html">Cara membuat efek salju pada blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-gambar-bergerak-pada-blog.html">Cara membuat gambar bergerak pada blog</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-shoutmix.html">Cara membuat shoutMix</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-tombol-like-pada-postingan.html">Cara membuat tombol like pada postingan</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-membuat-tulisan-bergerak-di-blog.html">Cara membuat tulisan bergerak di blog</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-mengganti-kursor-di-blog.html">Cara mengganti kursor di blog</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/cara-sembunyikan-shoutbox-di-sidebar.html">Cara sembunyikan shoutbox di sidebar</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/membuat-refresh-pada-blog.html">Membuat Refresh pada blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/membuat-pesan-pembuka-dan-penutup-pada.html">Membuat pesan pembuka dan penutup pada blog</a></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/menghasilkan-uang-dari-ngeblog.html">Menghasilkan uang dari ngeBLOG</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/perjalanan-blog-dalam-menyambut-tahun.html">Perjalanan blog dalam menyambut tahun baru 2012</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>

<a href="http://label-tutorial.blogspot.com/2011/12/tips-trik-seo-2012.html">Tips Trik SEO 2012</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li></ol></div>

8.  Klik tombol SIMPAN.

9.  Pindahkan elemen ke tempat yang anda inginkan.

10.  Klik tombol SIMPAN.

Selesai deh tutorial kali ini ,semoga bermanfaat bagi pembaca label tutorial blog.Terima kasih telah membaca.