Membuat Daftar Isi pada Blogger dengan Tampilan list tabel keseluruhan sesuai label

Berikut kita ada buat tampilan daftar isi dengan versi/tampilan yang berbeda

pada prinsipnya sama dengan daftar isi pada posting Daftar Isi sebelumnya, cuma beda tampilan agar lebih variatif dan fresh.

Membuat Daftar Isi atau SiteMap yang menampilkan isi Blog/Website bisa menjadi salah satu alternatif yang bisa dipakai

.
Caranya cukup mudah dan sederhana.

Ikuti Langkah Berikut :

1. Masuk ke Menu utama blogger
2. Klik Page (halaman baru) atau Post (Posting baru)
3. Klik Add Newpage atau NewPost
4. Buatlah Posting baru dengan judul "Daftar Isi"
5. Klik pada tampilan "HTML View"
6. Copy and paste kode dibawah ini

    <style>

    p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}

    a.post-titles {}

    ol li{list-style-type:decimal;line-height:25px;}

    </style><br />

    <script>

    //<![CDATA[

    var postTitle=new Array();var postUrl=new Array();var postLabels=new Array();var postRecent=new Array();function sitemaplabel(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postUrl[ii]=j;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2()}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var c="Category";var j="";if(postFilter!=""){j="Click to view all"};if(l==postTitle.length)var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">Baru!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}};

    //]]>

    </script><br />

    <script src="https://www.hdesignideas.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=sitemaplabel"></script>

Simpan dan lihat hasilnya.

Keterangan :

• cari kode "https://www.hdesignideas.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=sitemaplabel" ganti dengan alamat blog anda.
• Simpan dan lihat hasilnnya.

Hasil tampilan yang muncul adalah sebagai berikut :

Hasilnya sama dengan daftar isi yang ada diblog saya, klik di sini "SITEMAP"

SELAMAT MENCOBA......

SEMOGA BERMANFAAT.................