CARANECOM

Caranecom is a Informative Blogging, place of Information and Learning

Cara Membuat Sitemap / Daftar Isi Otomatis Di Blog


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
<!--//Contoh Script Keren 1-->
<script src="https://cdn.rawgit.com/mowdot/mysitemap/master/sitemapku.js"></script>
<script src="https://caranecom.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>



<!--//Contoh Script Keren 2-->
<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://caranecom.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

(Ubah tulisan berwarna merah dengan URL milik anda)
Dengan menggunakan kode diatas akan menjadikan tampilan sitemap/daftar isi blog/website anda terlihat rapi karena daftar artikel/postingan akan tersusun secara rapi sesuai dengan label, bahkan artikel lama anda akan ikut tersusun dengan rapi. Selebihnya gunanya membuat sitemap/daftar isi pada blog/website merupakan salah satu syarat jika blog anda ingin didaftarkan pada Google Adsense untuk dimonetisasi menjadi publisher.
Berikut adalah Ilustrasi hasil tampilan Sitemap/Daftar isi :
Gambar tampilan daftar isi blog

Atau tampilan kedua seperti dibawah ini :
Keduanya keren menurut penulis, tergantung anda pilih yang mana.

Demikian artikel tentang cara mudah membuat daftar isi secara otomatis pada blog sendiri ini semoga bermanfaat.

Baca : Cara Buat Privacy Policy,About,Contact Us,Disclaimer&TOS

Terimakasih
Salam Blogger
Salam Caranecom