Panduan Membuat Daftar isi Blog Sederhana dengan Mudah

Apa itu daftar isi blog? Seperti halnya buku, daftar isi pada sebuah blog akan memudahkan pengunjung blog untuk menjelajahi seluruh isi konten pada sebuah blog. Daftar isi juga bermanfaat untuk mengoptimalkan pengindeksan mesin pencarian (Search Engine Optimazed).

Selain itu daftar isi pada blog akan membantu membuat link internal antar-postingan secara otomatis untuk menaikkan rangking halaman postingan Anda.

Tujuan membuat daftar isi blog adalah untuk memberikan informasi tentang halaman blog, video, dan file lainnya di situs Anda, serta hubungan antar elemen tersebut. Mesin pencarian seperti Google membaca file ini untuk meng-crawl(merayapi) situs agar lebih efektif.

Peran daftar isi terbilang cukup penting, karena membuat daftar isi termasuk kedalam Technical SEO, untuk mempermudah mesin pencarian seperti Google, bing, untuk melakukan crawler (perayapan).

1. Masuk ke Blogger.com.

2. Buat Halaman baru lalu masukkan kode Script berikut. lalu simpan.

<
div id = "sitemap" > Loading... < /div> <
    script > //<![CDATA[
    var start = 1;
var max = 150;
var sitemapArr = new Array();

function runsitemap() {
var scpt = document.createElement(‘script’);
scpt.src = ‘/feeds/posts/summary?alt=json&callback=sitemap&start-index=’ + start + ‘&max-results=’ + max;
document.body.appendChild(scpt)
}

function sitemap(root) {
var elem = document.getElementById(‘sitemap’);
if (!elem) return;
elem.innerHTML = ”;
var feed = root.feed;
if (feed.entry.length > 0) {
for (var i = 0; i < feed.entry.length; i++) {
var entry = feed.entry[i];
var title = entry.title.$t;
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == “alternate”) {
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0) {
sitemapArr.push({
‘url’: url,
‘judul’: title
})
}
break
}
}
}
if (feed.entry.length >= max) {
start += max;
runsitemap()
} else {
var print = ”;
for (var x = 0; x < sitemapArr.length; x++) {
print += ‘

• ‘ + sitemapArr[x].judul + ‘

‘
}
elem.innerHTML = ‘

‘ + print + ‘

‘
}
}
}
runsitemap();
//]]>

3. Selanjutnya salin kode CSS berikut, lalu pastekan di atas tag ]]></b:skin>  pada halaman edit template blog.

#sitemap a {
	color: #212121;
	text-decoration: none;
	transition: all .3s ease;
}

#sitemap a:hover {
color: #000;
}

#sitemap ol {
margin: 0px;
padding: 0px;
}

#sitemap ol li {
color: #212121;
font-weight: 400;
list-style-type: decimal;
margin: 0px;
padding: 10px;
line-height: 1.5em;
-webkit-margin-start: 40px !important;
}

 

4. Simpan perubahan. Selesai.