Cara membuat Daftar Isi yang Elegan dan Mudah untuk Blogger

Salah satu komponen yang cukup penting bagi blog adalah daftar isi atau table of contents, atau sering juga disebut sitemap.

Berikut cara untuk menambahkan atau membuat Daftar Isi atau Table Of Contents alias sering juga disebut Sitemap yang bisa Anda praktekan langsung, tanpa harus meng-edit template blog Anda. Selain tampilan yang Elegan, Table Of Contents atau Daftar Isi ini juga langsung update alias auto update dan sangat mudah menambahkannya, cukup dengan menambahkan HTML saja. 

Contoh dari Daftar isi atau Table Of Contents bisa Anda lihat di bawah ini.

>> LIHAT CONTOH HASIL DISINI <<

Berikut langkah yang perlu dikerjakan jika Anda tertarik untuk menambahkan Daftar Isi atau Table Of Contents ke blog Anda:

1. Di halaman Blogger Anda, pilih Tambah Laman > Laman Baru, seperti urutan langkah seperti tertera di gambar berikut ini.

2. Buatlah judul bagi Halaman baru blog Anda, seperti Daftar Isi, Table Of Contents, atau Sitemap (di urutan no (1) gambar di bawah ini).

3. Pilih mode HTML seperti ditunjukkan pada no (2) gambar di bawah ini.

4. Ambil kode di bawah ini dan tambahkan seperti ditunjukkan di no (3) gambar di atas.

5. Ubah tulisan NAMA-BLOG-ANDA yang terdapat dalam kode agar sesuai menjadi alamat URL blog Anda.

<style type="text/css"> /*Outer Border ------------------*/ #toc{width:99%;margin:5px auto;border:1px solid #2D96DF; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);} /*Label Color and Background ------------------*/ .labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px; background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%); background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE)); border:1px solid #2D96DF;border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;} .labl a{color:#fff;} .labl:first-letter{text-transform:uppercase;} /*Latest Post Info ------------------*/ .new{color:#FF5F00;font-weight:bold;font-style:italic} /*Post Title List ------------------*/ .postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%); background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));} .postname li{border-bottom: #ddd 1px dotted;margin-right:5px} </style> <div id="toc"> <script type="text/javascript" src="https://googledrive.com/host/0B0dCKlNHFBz5bXpsQ2RWT1ZqQjg"></script> <script src="http://NAMA-BLOG-ANDA.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div>

5. Klik Publikasikan dan Anda bisa lihat hasilnya...

Semoga bermanfaat bagi Anda. Salam Blogger ... !!!