Membuat Daftar Isi Pada Blogger Agar Tampil Keren

Blogger | eBayu Online -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 :

Daftar Isi Script :

<script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type='text/javascript'></script> <script src="http://www.ebayuonline.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 : Tulisan http://www.ebayuonline.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.

Contoh hasilnya dapat dilihat DISINI