Membuat Daftar Di Blog

Membuat daftar isi secara otomatis sangat sulit untuk diterapkan di blogspot. Karena blogspot tidak menyediakan widget khusus untuk daftar isi. 

Karena alasan itulah, banyak blogger yang menggunakan script untuk membuat daftar isi. Mengingat pentingnya widget daftar isi tersebut sebagai kumpulan artikel yang telah dibuat sejak awal berdirinya blog Anda.

Jika widget daftar isi biasanya berbentuk itu-itu saja, disini saya akan memberikan cara untuk membuat daftar isi yang menarik dan keren. Bagaimana caranya? Ikuti langkah-langkah di bawah ini.

1. Buka Dashboard blog Anda

2. Pilih tab Pages >> New Page lalu pilih postingan dalam mode HTML

3. Pastekan kode dibawah ini

<script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type='text/javascript'></script>

<script src="http://www.medantoba.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<style type="text/css">

.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }

.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }

.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}

.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }

.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }

.ct-columns-3 p a:hover { background: #555; color: #fff; }

@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }

</style>

Ganti http://www.medantoba.blogspot.com dengan alamat blog Anda

4. Lalu pilih Options di kanan sidebar dan pilih Don't allow, hide existing untuk menyembunyikan kolom komentar. Jika Anda tidak ingin menghilangkannya, abaikan step ini.

5. Preview terlebih dahulu hasilnya. Untuk berjaga-jaga jika ada yang salah. Dan klik publish

6. Selesai dan lihat hasilnya.

Dan Lihat Hasilnya

 Bagaimana, keren bukan daftar isinya? Cara untuk membuat daftar isi yang menarik dan keren ini saya dapat dari BlogTipsnTrick. Dan sedikit bocoran kalau template yang saya pakai ini didapat dari situ juga :)