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 ...

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.................

COMMENTS

BLOGGER
Aluminium,4,Amdal,15,Arsitektur,63,Bahan bangunan,8,Bangunan Air,2,budaya indonesia,26,Denah Rumah,22,Galeri,25,Green house,6,Info sekilas,27,Interior,1,Irigasi,2,Jembatan,3,K3 konstruksi,4,Konservasi tanah,5,Konstruksi,48,Konstruksi Beton,15,Konstruksi kayu,38,Kuda kuda Baja,1,Kuda kuda kayu,4,Kusen,4,Lingkungan,15,Masjid,11,Mebelair,2,Menu navigasi,3,Opini,13,Pemberdayaan Masyarakat,7,Pendidikan,3,Peraturan,31,Pondasi,4,Profil Kusen,4,Property,46,RAB,28,Rumah adat,21,S E O,7,Sambungan Kayu,30,Sertifikasi,12,sipil,53,SNI,22,Software,2,Tangga,3,Tips trik blogger,27,Undang undang,12,Wisata,2,
ltr
item
Home Design and Ideas: Membuat Daftar Isi pada Blogger dengan Tampilan list tabel keseluruhan sesuai label
Membuat Daftar Isi pada Blogger dengan Tampilan list tabel keseluruhan sesuai label
https://1.bp.blogspot.com/-GEeg4epldEQ/YCXY5J5aTGI/AAAAAAAAJCE/rqyzj65Gf28jgBwgsMGSJNRhM4u5dQRhACLcBGAsYHQ/w400-h343/daftar%2Bisi%2B1.jpg
https://1.bp.blogspot.com/-GEeg4epldEQ/YCXY5J5aTGI/AAAAAAAAJCE/rqyzj65Gf28jgBwgsMGSJNRhM4u5dQRhACLcBGAsYHQ/s72-w400-c-h343/daftar%2Bisi%2B1.jpg
Home Design and Ideas
https://www.hdesignideas.com/2021/02/membuat-daftar-isi-pada-blogger-dengan.html
https://www.hdesignideas.com/
https://www.hdesignideas.com/
https://www.hdesignideas.com/2021/02/membuat-daftar-isi-pada-blogger-dengan.html
true
2215255630784927830
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content