Latest News

Cara 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 mampu 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)

Cara Membuat Daftar Isi Blog Paling Keren


Untuk berjaga jaga , sebaiknya Backup dulu template anda.
Baiklah pribadi saja Masuk Blogger - Laman - Buat Laman baru - Copy paste aba-aba 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 aba-aba di bawah ini dan tempatkan sebelum aba-aba </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 final simpan template anda.

Daftar isi blog keren atau tidak keren , tergantung dari penilaian masing masing , tapi jikalau menurut gue blog yang keren itu isi postingnya juga keren (bermutu) , di tambah penerapan daftar isi blog keren ini akhirnya Full keren :D
Semua aba-aba CSS untuk membuat daftar isi blog (widget sitemap) paling keren ini gue dapat dari mbak Arlina