Cara Membuat Siteamp / Daftar Isi Otomatis

Arif21.com - Daftar isi atau sitemap pada blog merupakan suatu peta atau petunjuk daftar yang bisa digunakan oleh pengunjung blog dalam melakukan surfing di sebuah website/blog. dan menjadi petunjuk letak-letak dari masing-masing artikel atau postingan pada sebuah website/blog.
Pada kesempatan kali ini Caranecom akan langsung membuat tutorial bagaimana mudahnya membuat daftar isi atau sitemap pada sebuah blog dan otomatis.
Dimana setelah selesai kita membuat sebuah artikel atau postingan maka secara otomatis masuk dalam daftar isi jadi kita tidak perlu lagi repot-repot menambahkan pada daftar isi/sitemap secara manual. Bahkan hasil postingan yang telah lama kita buat sekalipun akan tersusun secara otomatis berurut sesuai dengan label.

Bisa lihat pada contoh daftar isi blog ini di atas

Berikut adalah cara mudahnya membuat daftar isi/sitemap pada blog sendiri :
Untuk memulainya setelah anda berada pada dashboard blog anda pada bilah sisi sebelah kiri silahkan pilih Halaman kamudian pilih halaman baru, buat judul halaman misalnya : Daftar Isi kemudian klik pada HTML dan copy serta pastekan kode dibawah dan ganti tulisan berwarna merah dengan alamat url milik anda kemudian Publish.
Atau dengan urutan seperti berikut :
1. Login pada blog
2. Pilih Halaman
3. Buat Halaman Baru
4. Buat Judul
5. Klik tab HTML
6. Copas Kode dibawah dan ganti tulisan merah dengan url anda.
7. Publish
8. Selesai lihat hasilnya.
Copy dan paste kode ini pada halaman baru pada tab HTML

<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:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
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{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<br />
<div id="toc">
<script src="https://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>
<script src="https://www.arif21.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Kami harap tutorial cara membuat daftar isi blog pada konten ini dapat membantu Anda dalam menambahkan fitur menarik yang dapat memudahkan pengunjung. Jika Anda memiliki cara lain, jangan ragu untuk membagikannya melalui kolom komentar.

Tweet

Arif Rachman

Salah satu hal terbaik dalam hidup adalah melihat senyum di wajah orang tuamu, dan menyadari bahwa kamulah alasannya.

Postingan terkait:

Ditulis Arif Rachman — April 04, 2020 — Add Comment — Blogging