Cara Membuat Daftar Isi Otomatis Di Blog Keren Dan Responsive

Cara Membuat Sitemap Blogger - Pada kali ini kita akan membahas cara membuat daftar isi otomatis yang keren dan responsive. Mari simak baik - baik penjelasan dibawah ini.

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

1. Daftar isi Random, silahkan lihat demo Sitemap  !
2. Daftar isi dalam Kategori atau Label, lihat demo Label !

Untuk menerapan ke 2 Hal yang di atas, cukup mudah hanya membuat laman pada menu sebelah kiri dasbor Blogger Anda dan memilih HTML bukan Compose. Lalu bagaimana cara melakukan ini?

Daftar Isi Random (new post)

Memasang 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 apa saja (Saran; Sitemap) dan Publikasikan

Daftar Isi Tersusun dalam kategori atau label

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 Khusus Blogger. (Semua data script di atas dimuat pada hosting pihak ke 3 Oleh Arlina Desain).

Semoga artikel ini bermanfaat, untuk mendapatkan update artikel setiap harinya. Silahkan masukkan email dibagian bawah ini untuk mendapat Artikel terbaru.

 

Baca juga: