-->

Wednesday, November 30, 2016

Cara Membuat Daftar Isi Sederhana dan Otomatis di Blog

Daftar isi atau sitemap merupakan salah satu elemen yang tergolong penting dalam sebuah blog / web. Layaknya sebuah buku, blog juga harus memiliki daftar isi sebagai tempat informasi bagi para pengunjung blog yang berisi daftar judul - judul artikel yang telah dipublikasikan, sehingga pengunjung bisa dengan mudah mencari informasi yang di butuhkan.

Selain itu, menurut para ahli SEO, membuat sitemap blog juga termasuk salah satu bentuk SEO, sebab di dalam sitemap memuat susunan link yang sangat komplek dan secara otomatis memperkuat link building sebuah blog.

Mengapa disebut daftar isi otomatis? Karena setiap postingan yang anda publikasikan akan secara otomatis tersimpan / tercantum di dalam halaman daftar isi blog. Jadi kita tidak perlu menulisnya secara manual, Praktis boss.

Berikut ini cara membuat daftar isi / sitemap otomatis di blog menggunakan script yang bisa di bilang sangat ringan atau Responsive, sebab halaman daftar isi sederhana ini di muat tidak menggunakan bantuan link dari luar.

Ngomongin soal Responsive, sudahkah template Blogger anda responsive, jika belum ikuti panduan ini :

Cara Membuat Template Default Blogger Menjadi Responsive.

daftar isi sederhana

Daftar isi sederhana tanpa label

1. Masuk ke Blogger >> pilih blog >> klik menu Laman >> klik laman baru.

Beri judul laman Daftar isi, Peta Situs, atau Sitemap.

2. Klik mode HTML (sebelah compose), Copy dan paste salah satu kode script di bawah ini.

Jika anda ingin daftar isi hanya menampilkan judul postingan, silahkan gunakan script berikut ini.

<script>
var numposts = 1000;
</script>
<script>
function boss(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
posttitle = posttitle.link(posturl);
}
}
document.write(posttitle);
('</li>');
}
('</ul>');
}
</script>
<script src="https://bakuloreg.blogspot.com/atom.xml?redirect=false&amp;start-index=1&amp;max-results=1000&amp;orderby=published&amp;alt=json-in-script&amp;callback=boss"></script>

Jika ingin daftar isi menampilkan judul dan tanggal postingan, silahkan gunakan script di bawah ini.

<script>
var numposts = 1000;
var showpostdate = true;
</script>
<script>
function boss(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
posttitle = posttitle.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
}
}
document.write(posttitle);
if (showpostdate == true) document.write(' ' + cdday + ' - ' + monthnames[parseInt(cdmonth,10)] + ' - ' + cdyear);
('</li>');
}
('</ul>');
}
</script>
<script src="https://bakuloreg.blogspot.com/atom.xml?redirect=false&amp;start-index=1&amp;max-results=1000&amp;orderby=published&amp;alt=json-in-script&amp;callback=boss"></script>

Jangan lupa ganti warna merah dengan alamat blog anda.

ket :
var numposts = 1000;

Artinya daftar isi bisa memuat maximum 1000 judul artikel, silahkan ubah sesuai kebutuhan.


var showpostdate = true;

Ini menunjukkan tampilan tanggal aktif, jika nilai nya di ubah menjadi false, maka tanggal postingan tidak tampil (nonaktif).

Berdasarkan pengalaman pribadi Sebaiknya halaman sitemap langsung di publikasikan pada mode HTML, sebab jika dipublikasikan pada mode compose script tidak bisa berfungsi lagi karena ada perubahan posisi dalam script.(script yang ber warna kuning mudah berubah).

3. Publikasikan

Jika muncul peringatan seperti ini :

Laman ini berisi sumber daya HTTP yang dapat menyebabkan konten campuran memengaruhi keamanan dan pengalaman pengguna jika blog dilihat melalui HTTPS.

Klik perbaiki, lalu publikasikan.

4. Lihat hasilnya, dan catat alamat sitemap anda, selanjutnya tinggal anda pasang di menu blog anda.

Catatan: Jika anda menggunakan judul Sitemap, biasanya akan menghasilkan alamat seperti ini:

http://yoursite.blogspot.com/p/sitemap.html

Pelajari juga: Cara Membuat Daftar Isi Blog Berdasarkan Label.

Sekian tutorial cara membuat sitemap sederhana di blog, semoga bisa bermanfaat dan selamat mencoba. Salam Blogger.

19 comments:

Rustadi said...

mantap

Ridwan said...

Terima kasih gan

Prima Chandra said...

Wow, berhasil...thanks sharingny mas Ridwan :)
Hasilnya bisa dilihat di sini :http://www.primachandra.com/p/daftar-isi.html

Ridwan said...

Sama-sama gan

THALYFUTO said...

Thanks atas Tutorialnya.

MAS-13 said...

ini yang di cari-cari , makasih mas :)
jadi keren deh :) , https://www.mas-13.com/p/sitemap.html

Sang Prabu said...

Ada gal script buat klo pengen daftar isi yg sistem dropdown mas? Biar hemat laman?

Ridwan said...

Wah gak punya paduka, tapi Blogger punya widget arsip model dropdown yang sangat hemat ruang hehehe,
Nantilah kalau nemu saya share di blog ini

Dogon Solahuddin said...

Terima lasih gan

Damiri said...

Gak ada demonya mas?

Anonymous said...

Waah, langsung bisa gan, habis coba di situs lain gagal terus. Bagaimana mengurutkannya secara alphabet gan?

Ridwan said...

Script itu gak bisa, Pakai yang versi label aja Kak, udah urutan alphabet

Tri Winoto said...

Terima kasih gan, setelah pusing saya coba yang lain gak bisa pake cara agan langsung topcer. Terima kasih banyak

Ari Prasetyawan said...

makasih gan tutorialnya, tadinya daftar isi saya tiba" hilang hihi

Mboton said...

thank youuu kawan........

mboton.net

Anonymous said...

Terima kasih ya

usahamesinagenbola said...

Akhirnya nemu, semua blog lainnya eror gak bisa.. disini bisa

CinkCankKelink said...

Makasih sitemap nya sukses

AW_Media said...

Thank u ya..informatif bgt..ternyata ngga gampang juga ya..utak - atik html