Membuat daftar isi blog pada Blogger

Ada banyak cara yang bisa kita lakukan untuk membuat daftar isi blog. Cara yang paling sering dilakukan oleh para blogger (mungkin anda juga) adalah dengan memasukkan URL postingan pada Link List yang terdapat pada elemen halaman blogger atau dengan membuat link artikel secara manual untuk diletakkan pada sidebar atau footer blog (seperti membuat link blogrool).

Untuk melakukan cara-cara tersebut sudah tentu memerlukan waktu yang lama, apalagi jika isi blog kita sangat banyak. Cara seperti ini juga tidak efisien karena harus selalu meng-updetnya setiap kita memposting artikel baru. Nah untuk mempermudahnya kita bisa memanfaatkan kreasi hans yang di muat pada beautiful beta. Cara ini bekerja secara otomatis, dan akan langsung menambahkan artikel yang baru diposting pada daftar isi blog. Jadi kita tidak perlu meng-update secara berulang-ulang. Untuk membuatnya silahkan ikuti langkah-langkah berikut:

Langkah pertama:

1. Sign in di blogger anda

2. Klik menu Layout

3. Lalu klik Edit HTML

4. Klik Download full template untuk membackup data

5. Copy paste kode CSS berikut di atas kode ]]></b:skin>

#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}

6. Klik SIMPAN TEMPLATE


Langkah kedua:

1. Klik Elemen Halaman

2. Lalu klik Tambah sebuah Elemen Halaman

3. Klik TAMBAHKAN KE BLOG pada JavaScript/HTML

4. Copy dan paste kode dibawah ini kedalam elemen yang muncul

<div id="toc"></div>

5. Klik Simpan

6. Pindahkan elemen yang baru di buat tepat di atas elemen Post

7. Klik tombol Simpan

8. Klik Tambah sebuah Elemen Halaman kembali

9. Klik tombol TAMBAHKAN KE BLOG pada JavaScript/HTML

10. Beri judul elemen tersebut sesuai kesukaan anda, Contoh: DAFTAR ISI. Lalu copy paste kode dibawah ini kedalam kotak elemen

<div id="toclink"><a href="javascript:showToc();">Lihat Daftar Isi</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://made-blink182.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

11. Ganti tulisan YOURBLOG dengan nama blog anda

12. Klik tombol Simpan

13. Pindahkan elemen yang baru di buat ke tempat yang anda inginkan

14. Klik tombol SIMPAN

15. Selesai