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

Komentar

  1. Your article has helped me find out all the necessary elements of an exceptional blog post to create content that can provide detailed information to readers. Thank you so much for sharing this amazing blog with us. Cheap Dissertation Writing Service

    BalasHapus
  2. Thanks. Although it was really helpful and effective, you had to have included some brief explanations of H1, H2, and H3 tags in the same blog. essay writing services cheap To apply this code, all of the headings must be in the H2 format; otherwise, it will not function.

    BalasHapus
  3. Discovering this website for professional cv services canada is like finding the ideal blueprint for creating a great career, according to Home Design and Ideas.




    BalasHapus

Posting Komentar

Note :
. Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
. Terima kasih komentarnya...
. Semoga Bermanfaat...

Postingan populer dari blog ini

Simbol ornamen tradisional rumah adat Jawa tengah

Menentukan ukuran Tangga dan Anak Tangga untuk bangunan bertingkat

Mengenal bagian kusen pintu dan jendela kayu

Menghitung Volume Besi per-m3 beton bertulang

Berita terbaru