Cara Membuat Tampilan Daftar Isi / Sitemap Untuk Blog

Zsmart.id. Dalam mengelola sebuah blog diperlukan manajemen halaman yang baik karena dalam sebuah blog banyak berisikan tema-tema artikel sehingga butuh adanya suatu pengelompokan artikel sesuai dengan topik artikel tersebut. Cara yang mudah yakni dengan membuat halaman pada blog yang berisikan semua judul-judul artikel yang dikategorikan berdasarkan topik atau label dari artikel-arikel tersebut. Oleh karena itu, kita akan membuat halaman daftar isi tersebut.

1) Langkah pertama silahkan masuk ke akun blogger kamu lalu pilih menu pages di sidebar blog kamu.

2) Pilih + New Page pada bagian atas sidebar sebelah kiri

3) Isi judul halaman kamu dengan kata Daftar Isi atau apapun itu sesuai kebutuhan kamu.

4) Ubah tampilan pengisian dari Compose View ke HTML View

5) Setelahnya, silahkan kamu salin dan tempelkan kode berikut :

<style type="text/css">

#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}

.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;

padding:1px 0 2px 11px;background: #3498DB;

border:1px solid #2D96DF;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;

-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}

.labl a{color:#fff;}

.labl:first-letter{text-transform:uppercase;}

.new{color:#FF5F00;font-weight:bold;font-style:italic;}

.postname{font-weight:normal;background:#fff;margin-left: 35px;}

.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}

</style>

<div id="toc">

<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>

<script src="https://zsmart.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

6) Ubah tulisan berwarna merah dengan alamat blog kamu

7) Untuk melihat hasilnya, kamu bisa menekan tombol Preview, jika sudah selesai silahkan di-Publish.

Selesai !

Share :