Cara Membuat Daftar Isi Otomatis Di Blog Keren Dan Responsive

Cara Membuat Daftar Isi Ala Arlina

Jika sebelumnya kita belajar mengenai membuat contact us, pada kali ini kita akan membahas cara membuat daftar isi otomatis yang keren dan responsive. Mari simak baik - baik penjelasan dibawah ini.

Sitemap Flat Design

Penjelasan & Fungsi Daftar Isi di Blog

Daftar Isi atau Sitemap merupakan sebuah halaman yang menjadi petunjuk pokok atau penting akan isi sebuah blog. Dengan adanya daftar isi ini akan mempermudah pengunjung untuk mencari artikel yang dia butuhkan. Layaknya kita mau membaca buku, pastinya kita akan membuka daftar isi terlebih dahulu supaya tidak susah mencari halaman yang kita inginkan. Selain untuk mempermudah mencari artikel, daftar isi juga merupakan salah satu syarat untuk diterima oleh Google Adsense. Jadi sahabat bloggers jangan lewatkan hal yang satu ini.

Penerapan Daftar Isi di Blog

Disini saya akan share kode HTML Daftar Isi atau Sitemap ala Template New Minima Colored Arlina Design. Ada 2 jenis daftar isi, diantaranya :

Daftar Isi Random (new post)

Daftar Isi ini akan menunjukkan artikel - artikel dengan random (acak) dan berurutan sesuai postingan paling baru. Berikut cara penerapannya :

1. Masuk ke Blogger dan buat Laman Baru di Postingan Statis
2. Copy dan Masukkan kode ini pada tab HTML bukan Compose

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/sitemap2.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
.post-body td a {background:initial;color:#000;padding:initial;font-size:13px;float:initial;display:initial;border-radius:initial;font-weight:initial;}
.post-body td a:hover {background:initial;color:#3498db;text-decoration:underline;}
</style>

3. Beri Judul dan Publikasikan

Daftar Isi Tersusun (category)

Daftar Isi ini akan menunjukkan artikel - artikel terbaru. Namun kita bisa memilih kategori mana yang ingin kita cari. Berikut cara penerapannya :

1. Masuk ke Blogger dan buat Laman Baru di Postingan Statis
2. Copy dan Masukkan kode ini pada tab HTML bukan Compose

<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>

3. Beri Judul dan Publikasikan

Maka begitulah cara membuat daftar isi otomatis di blog yang keren da responsive. Jika teman - teman ingin mendapatkan template premium dengan kode - kode menarik lainnya. Silahkan kunjungi Idntheme.com. 

Semoga artikel ini bermanfaat, untuk mendapatkan update artikel setiap harinya. Silahkan masukkan email dibagian kanan postingan.

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: