Membuat Daftar Isi (Sitemap) di Blogspot Berdasarkan Label Tertentu dan Menampilkan Thumbnail - Keren dan Responsive


Peta situs blog atau website lebih populer dengan sebutan daftar isi atau menu navigasi daftar isi, dan dalam bahasa inggris disebut dengan sitemap atau table of content.

Halaman daftar isi sangat membantu bagi pengguna, mesin pencari, maupun pemillik blog sendiri untuk menjelajahi keseluruhan isi website. Membuat daftar isi blog juga direkomendasikan oleh google karena membuat pengunjung merasa nyaman ketika mengunjungi blog, karena konten blog yang dicari bisa ditemukan dengan mudah. Daftar isi blog juga meningkatkan seo (optimalisasi mesin pencari) karena memuat semua link internal dengan kata kunci atau anchor teks yang benar-benar tepat.

Cara Membuat Daftar Isi Blog:

1. Masuk / Login akun Blogger yang ingin ditambahkan Halaman daftar isi

2. Pilih Halaman di Menu Dashboard Blog

3. Pilih Halaman Baru

4. Masuk mode HTML

5. Copy kode HTML daftar isi di bawah ini

Kode Berdasarkan Label Tertentu

<div id="recentpostsae">
</div>
<div id="recentpostnavfeed">
</div>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.statically.io/gh/demonlordonline/DLO-Novel/8559a12b/DLOLISTCSS.css">
</head>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 20;
var startfeed = 0;
var urlblog = "https://winfoku.blogspot.com/";
var charac = 50;
var urlprevious, urlnext;
function winfokufeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgioKxIhNmfvB0x6joXnkR8ihYC1-5gVj9tnLRnXmylZsPALesXKQymtOdeoFnxJzEDZZ8fQfHozvFFnYTL89_mnLfLthUQAvalwKNhGGYAHpV-dq-saM7dcNVn-TRfUmWI_1p-hsDHxMXn/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+winfokufeed(i,charac)+".....</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default/-/Blogger"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","winfokulabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("winfokulabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>

- Ganti https://winfoku.blogspot.com/ dengan URL blog anda
- Ganti Label Blogger dengan Label yang ingin anda Tampilkan


Kode Menampilkan Semua Postingan Blog

<div id="recentpostsae">
</div>
<div id="recentpostnavfeed">
</div>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.statically.io/gh/demonlordonline/DLO-Novel/8559a12b/DLOLISTCSS.css">
</head>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 30;
var startfeed = 0;
var urlblog = "https://winfoku.blogspot.com/";
var charac = 50;
var urlprevious, urlnext;
function winfokufeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgioKxIhNmfvB0x6joXnkR8ihYC1-5gVj9tnLRnXmylZsPALesXKQymtOdeoFnxJzEDZZ8fQfHozvFFnYTL89_mnLfLthUQAvalwKNhGGYAHpV-dq-saM7dcNVn-TRfUmWI_1p-hsDHxMXn/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+winfokufeed(i,charac)+".....</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","winfokulabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("winfokulabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>

- Ganti https://winfoku.blogspot.com/ dengan URL blog anda


6. Klik Publish

Demikian Cara Membuat Daftar Isi (Sitemap) di Blogger Berdasarkan Label Tertentu dan Menampilkan Thumbnail - Keren dan Responsive. Semoga bermanfaat.


EmoticonEmoticon