Membuat Daftar Isi Blog Paling Keren

Membuat daftar isi blog atau seringkali di sebut sitemap blog penting sekali untuk sebuah navigasi, seorang pengunjung akan segera dapat mengakses isi posting atau konten blog anda dengan mudah, selain itu fungsi daftar isi blog juga menambah tampilan blog lebih elegan dan terlihat profesional.

Di posting sebelumnya juga pernah di bahas mengenai cara membuat sitemap blog, semua keterangan lengkap mengenai daftar isi blog bisa anda simak pada : Contoh Daftar Isi Blog Yang Ringan Dan Seo Friendly.

Daftar isi blog ini otomatis menyesuiakan, berdasarkan label/category yang ada di posting blog anda, satu lagi keistimewaan daftar blog ini bergambar (thumnail). Contohnya seperti gambar di bawah ini.

Untuk berjaga jaga, sebaiknya Backup dulu template anda.
Baiklah langsung saja Masuk Blogger – Laman – Buat Laman baru – Copy paste kode di bawah ini pada Mode HTML.

<div id=”table-outer”> <table><tbody> <tr><td><label>Sort posts by : </label></td><td><select id=”orderFeedBy”><option selected=”” value=”published”>New post</option><option value=”updated”>Post updated</option></select></td></tr> <tr><td><label>Filter posts by category : </label></td><td><span id=”labelSorter”><select disabled=””><option selected=””>Loading…</option></select></span></td></tr> <tr><td><label>Search by keyword : </label></td><td><form id=”postSearcher”> <input type=”text” /></form> </td></tr> </tbody></table> </div> <header id=”resultDesc”></header> <ul id=”feedContainer”></ul> <div id=”feedNav”> Loading…</div> <script src=”https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/sitemap-tab.js” type=”text/javascript”></script> <style scoped=”” type=”text/css”> #comments {display:none;} </style>

Setelah selesai publikasikan halaman.
Selanjutnya,masuk ke menu Template – Edit Template, Copy paste kode di bawah ini dan tempatkan sebelum kode </style>

/* CSS Full Sitemap */ #bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;} span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:’Open Sans’;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;} .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;} .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;} .toc-header-col3 {padding:10px;background-color:#f5f5f5;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:13px; text-decoration:none;color:#aaa;font-family:’Open Sans’;font-weight:700;letter-spacing: 0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .toc-entry-col1 {counter-increment:rowNumber;} #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;} td.toc-entry-col2 {background:#fafafa;}

Setelah selesai simpan template anda.

Daftar isi blog keren atau tidak keren, tergantung dari penilaian masing masing, tapi kalau menurut saya blog yang keren itu isi postingnya juga keren (bermutu), di tambah penerapan daftar isi blog keren ini jadinya Full keren 😀

Semua kode CSS untuk membuat daftar isi blog (widget sitemap) paling keren ini saya dapat dari mbak Arlina ,cek : http://arlinadesign.blogspot.com