Cara Membuat Daftar isi Blog Sederhana Dan Responsive

Daftar isi blog sederhana dan responsive dengan membuat memiliki daftar isi Blog dengan tampilan sederhana namun responsive karena daftar isi yang menggunakan script ringan dan baik untuk pengunjung yang menggunakan data internet yang cukup dibilang kurang baik.

Fungsi dari daftar isi (sitemap) untuk blog dengan script cukup terbilang sederhana namun responsive untuk semua jenis blog yang dipakai supaya para pengunjung mudah dan simple mengetahui dan mencari artikel atau post yang sudah dipublishkan dan menemukan dengan cepat tanpa mengalami masalah yang didapat nantinya.

Cara Membuat Daftar isi Blog Sederhana Dan Responsive

Jadi anda yang sedang membangun situs terutama menggunakan blog atau wordpress untuk selalu menyediakan sitemap atau daftar isi.

Langkah - Langkah Membuat Daftar Isi (sitemap) Secara otomatis Di Blogger

1. Seperti biasa login ke dashboard blog

2. Cari menu " Halaman " dan memilih " halaman baru " pada blog

3. Pada halaman jangan lupa untuk membuat judul " daftar isi " yang nantinya akan menjadikan tempat untuk sitemap atau daftar isi.

4. Jangan lupa untuk mengcopy kode - kode HTML dibawah ini

Kode 1 :

<p>
<script src="http://yourjavascript.com/81791141115/toc-pages.js" type="text/javascript"></script>
<script src="https://NAMABLOGKAMU.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</p

Kode 2 :

<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&start-index=1&max-results=1000&orderby=published&alt=json-in-script&callback=boss"></script>

Kode 3 :

<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&start-index=1&max-results=1000&orderby=published&alt=json-in-script&callback=boss"></script>

Kode 4 :

<div id="sitemap-blog">
<table>
<tbody>
<tr>
<td>
<label for="feed-order">Urutkan artikel berdasarkan:</label>
</td>
<td>
<select id="feed-order">
<option selected="" value="published">Artikel terbaru</option>
<option value="updated">Artikel yang terakhir di update</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="label-sorter">Filter artikel berdasarkan kategori:</label>
</td>
<td>
<select disabled="" id="label-sorter">
<option selected="">Loading....</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="feed-q">Cari artikel dengan kata kunci:</label>
</td>
<td>
<form id="post-searcher">
<input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
<br />
<header id="result-desc"></header>
<br />
<ul id="daftar-isi-blog"></ul>
<div id="feed-nav">
</div>

<script type="text/javascript">
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
var css = '#sitemap-blog{padding:7px 10px;margin:0 auto}#sitemap-blog table{width:auto;margin:0 auto;border:none!important}#sitemap-blog table td{border:none!important;padding:0!important}#sitemap-blog form{font:inherit}#sitemap-blog label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#sitemap-blog select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#sitemap-blog input,#sitemap-blog select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#sitemap-blog select option{min-height:1.4em!important}#sitemap-blog input#feed-q{padding:5px 10px!important}#daftar-isi-blog{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}#daftar-isi-blog li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftar-isi-blog li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#daftar-isi-blog li a{text-decoration:none;color:#2C2C2C;font-weight:500}#daftar-isi-blog li a:hover{text-decoration:none;color:#E94141}#daftar-isi-blog li .news-text{margin-top:5px;line-height:1.3em!important}#daftar-isi-blog li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#sitemap-blog table{margin:0 auto;width:100%}#daftar-isi-blog,#sitemap-blog{margin:0 auto}#daftar-isi-blog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftar-isi-blog li .news-text,#feedContainer:after,#daftar-isi-blog li img{display:none!important}}.post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP866LgZx3iZEVlf5bakebXyE75kf0njDzCbVzZkTYgv92UUV868VAkc3nLmBCPUXyr5wexwpurVyPR2KhhejMotjVZsXsTL8qLbnZFRa9l_VtGjyADaOsz_q2VPML6EYnwLlsMp3jdPQ/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important}';
style.appendChild(document.createTextNode(css));
head.appendChild(style);
</script>
<script type='text/javaScript'>
document.write;
var loadToc, loadCategories, _toc = {
init: function() {
var cfg = {
homePage: window.location.origin,
maxResults: 10,
numChars: 270,
thumbWidth: 140,
thumbHeight: 95,
navText: "Tampilkan artikel selanjutnya ▼",
resetToc: "Kembali ke Awal",
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbqOTWIh0GlM0qZV81AWXXIdDy5SCO47c8F7Mu27S0MEjq5ZFU1H8miAz8yjf2_8jQ3gURQD-3Nrn5wX_0O7OJr4SQLbhLyrt9390cEQMySZVlHhmx-CJsSPGpnZsS7liZWceUBaOjdnv/s1100/no-thumbnail.png",
loading: "<span>Memuat...</span>",
counting: "<div>Memuat artikel...</div>",
searching: "<span>Mencari...</span>"
},
w = window,
d = document,
el = function(id) {
return d.getElementById(id);
},
o = {
a: el('feed-order'),
b: el('label-sorter').parentNode,
c: el('post-searcher'),
d: el('feed-q'),
e: el('result-desc'),
f: el('daftar-isi-blog'),
g: el('feed-nav'),
h: d.getElementsByTagName('head')[0],
i: 0,
j: null,
k: 'published',
l: 0,
m: ""
},
fn = {
a: function() {
old = el('temporer-script');
old.parentNode.removeChild(old);
},
b: function(param) {
var script = d.createElement('script');
script.type = "text/javascript";
script.id = "temporer-script";
script.src = param;
if (el('temporer-script')) fn.a();
o.h.appendChild(script);
},
c: function(mode, tag, order) {
o.i++;
o.e.innerHTML = cfg.counting;
o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"];
if (mode === 0) {
fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');
} else if (mode == 1) {
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc');
}
o.j = (tag !== null) ? tag : null;
o.l = mode;
o.a.disabled = true;
o.b.children[0].disabled = true;
},
d: function(json) {
var _h;
o.g.innerHTML = "";
o.e.innerHTML = o.l == 1 ? '<span>Hasil penelusuran untuk kata kunci <b>“' + o.m + '”</b> (' + json.feed.openSearch$totalResults.$t + ' Hasil)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Artikel</div>';
if ("entry" in json.feed) {
var a = json.feed.entry,
b, c, _d, e = "0 Komentar",
f = "",
g;
for (var i = 0; i < cfg.maxResults; i++) {
if (i == a.length) break;
b = a[i].title.$t;
_d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : "";
g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "");
for (var j = 0, jen = a[i].link.length; j < jen; j++) {
c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#";
}
for (var k = 0, ken = a[i].link.length; k < ken; k++) {
if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {
e = a[i].link[k].title;
break;
}
}
_h = d.createElement('li');
_h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" target="_blank" title="' + b + '">' + b + '</a><div class="news-text">' + _d + '…<br style="clear:both;"></div></div>';
o.f.appendChild(_h);
}
_h = d.createElement('a');
_h.href = '#load-more';
_h.innerHTML = cfg.navText;
_h.onclick = function() {
fn.c(o.l, o.j, o.k);
return false;
};
} else {
_h = d.createElement('a');
_h.href = '#reset-content';
_h.innerHTML = cfg.resetToc;
_h.onclick = function() {
o.i = -1;
o.e.innerHTML = cfg.counting;
o.f.innerHTML = "";
fn.c(0, null, 'published');
o.a.innerHTML = o.a.innerHTML;
o.b.children[0].innerHTML = o.b.children[0].innerHTML;
return false;
};
}
o.g.appendChild(_h);
o.a.disabled = false;
o.b.children[0].disabled = false;
},
e: function(json) {
var a = json.feed.category,
b = '<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';
for (var i = 0, len = a.length; i < len; i++) {
b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>';
}
b += '</select>';
o.b.innerHTML = b;
o.b.children[0].onchange = function() {
o.i = -1;
o.f.innerHTML = "";
o.g.innerHTML = cfg.loading;
fn.c(0, this.value, o.k);
};
}
};
loadToc = fn.d;
loadCategories = fn.e;
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max-results=' + cfg.maxResults + '&orderby=published&callback=loadToc');
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');
o.a.onchange = function() {
o.i = -1;
o.f.innerHTML = "";
o.g.innerHTML = cfg.counting;
o.b.children[0].innerHTML = o.b.children[0].innerHTML;
fn.c(0, null, this.value);
o.k = this.value;
};
o.c.onsubmit = function() {
o.i = -1;
o.f.innerHTML = "";
o.m = o.d.value;
fn.c(1, o.d.value, o.k);
return false;
};
}
};
_toc.init();
</script>

5. Jangan salah pemasangan kode HTML untuk pemanggilan daftar isi di halaman,maka pilih " HTML " bukan dengan " Compose "

6. Setelah itu klik simpan dan jikalau tidak muncul silahkan dicoba kode dari 1-4

7. Jika sudah benar dan menampilkan daftar isi (sitemap) silhkan diklik simpan

sampai disini anda telah berhasil menerapkan cara pemasangan dan membuat daftar isi (sitemap) untuk blogger secara otomatis. cukup mudah dan sederhana untuk tutorial yang dilengkapi dengan langkah - langkah simple untuk dimengerti. dari admin terimakasih dan selamat mencoba, semoga bisa bermanfat.