Kode Daftar Isi Blog Simple Sampai Tabulasi

Daftar Isi (Table of Content) yaitu daftar posting yang sudah dipublikasikan di blog.

Para blogger juga mengenalnya sebagai peta situs (sitemap).

Fungsi daftar isi sebagai navigasi sekaligus tautan kedalam (internal link) yang cantik buat SEO blog.

Daftar isi dibentuk di halaman statis (static page) atau Page/Halaman.

BERIKUT ini kode daftar Isi Blog (Sitemap, Peta Situs) Navigasi Plus Gambar Thumbnail & dan Daftar Isi Tabulasi. Dipasang atau dibentuk di halaman statis.

1. Page > New Page > Tulis Judul Halaman dengan Sitemap atau Daftar Isi
2. Klik Mode HTML > masukkan salah satu arahan di bawah ini

Kode Sitemap Navigasi plus Image Thumbnial

yaitu daftar posting yang sudah dipublikasikan di blog Kode Daftar Isi Blog Simple sampai Tabulasi

Lihat DEMO

<style type='text/css'>
.post {margin: 8px 5px;padding: 5px 0px;border-bottom: 2px solid #DDE;}.post h1,.post h2{font:17px Oswald;line-height:1.2em;margin:8px 0 10px;padding:0;text-shadow:none}
.post img{transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;width:100%;height:100%}.post-body{font:12px Arial;border-top:none;padding-top:0;line-height:1.5em;margin:0;padding-bottom:10px;text-align:left;color:#444}.post-footer{display:none}.postmeta{padding:5px 0 10px;display:none}.post img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}.cutter{width:270px;height:140px;overflow:hidden;border:2px solid #fafafc;margin:0 15px 5px 0;float:left;padding:0}#toc-outer{font:normal 11px/14px Arial,Sans-Serif;overflow:hidden;text-align:left;color:#333;margin:0 auto;padding:0}#loadingscript{background:transparent;font-weight:700;font-size:20px;height:335px;text-align:center;text-indent:-99999px;padding:30px 0}.itemposts{float:left;height:auto;overflow:hidden;width:47%;-webkit-box-shadow:1px 1px 5px #fafafc;-moz-box-shadow:1px 1px 5px #fafafc;-ms-box-shadow:1px 1px 5px #fafafc;-o-box-shadow:1px 1px 5px #fafafc;box-shadow:1px 1px 5px #fafafc;background:#fafafc;border:1px solid #fff;margin:5px 5px 5px 0;padding:0 3px}.itemposts h6{color:#2b2b2b;font:14px Oswald;height:42px;overflow:hidden;margin:0 0 5px;padding:8px 6px!important}.itemposts h6 a:hover{color:#48d}.itemposts h6 a:link,a:visited{color:#2b2b2b}.itemposts img{float:left;height:72px;width:72px;z-indent:99999px;margin:0 7px 5px 5px}.itemposts .itemfoot{display:none;border-top:1px dotted #ccc;clear:both;color:#0;overflow:hidden;padding:4px 5px}.itemposts .itemfoot a.itemrmore{color:#333;float:right;font-weight:700;text-decoration:none}.itemposts .itemfoot a.itemrmore:hover{text-decoration:underline}#itempager{clear:both;padding:10px 0 10px 5px}#halaman{color:#03C;display:block;font:12px Arial;margin-bottom:1px;text-align:left;padding:10px 5px;background:#fff;height:15px}#totalposts{display:none}#halaman span,#halaman a{background:#48d;color:#fff;display:inline;text-indent:0;text-decoration:none;margin:0 2px;padding:4px 8px}#halaman span.hidden{display:none}#halaman a:hover,#halaman span.actual{background:#333}@media only screen and (max-width:910px){.itemposts{margin:0 2px 5px 5px;overflow:hidden;width:43.7%;height:auto}}@media only screen and (max-width:480px){.itemposts{margin:0 2px 5px 5px;overflow:hidden;width:43.5%;height:auto}}@media only screen and (max-width:468px){.itemposts{width:100%;float:left;margin:0 5px 5px 0;font-size:13px}#post-kiri,#post-kanan{width:96%}}@media only screen and (max-width:320px){.itemposts{width:94%;float:left;margin:0 5px 10px}.cutter{width:110px;height:80px}#post-kiri{width:90%;float:left;padding-left:10px}#post-kanan{width:90%;float:left;padding-left:10px}}
</style>
<script type='text/javascript'>
//<![CDATA[
var showPostDate = false,
showComments = false,
idMode = true,
sortByLabel = false,
labelSorter = "",
loadingText = "Loading...",
totalPostLabel = "Total Post :",
jumpPageLabel = "Page",
commentsLabel = "Comments",
rmoreText = "Read more ►",
prevText = "Prev",
nextText = "Next",
siteUrl = "http://testemplatecb.blogspot.com/",
postsperpage = 9,
numchars = 160,
imgBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVbR6ik81WzhnSg9gHk0NTtBaJN0Btrgk7LEWoNMhy7yWpXRnrR0Oo5OOwOqEbpENdVGa35z1B8iiiTohY5kZhBc8dCjX73hkPmZGOmMBN2LOTYvHSPWM-hahJIg9X7DajV1gvFFrsGF0/s1600/no+image.jpg";
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
// -----------------------------------------------------------------------------------------
// Table of Content for Blogger with Pagination
// Original: https://marwanpedia.blogspot.com/search?q=resumen-de-entradas-con-paginacion
// Modified by Taufik Nurrohman
// On 3 March 2012
// Visit: http://hompimpaalaihumgambreng.blogspot.com
// -----------------------------------------------------------------------------------------
function showpageposts(e){var t,n,r,i;var s="";if(pagernum==0){postsnum=parseInt(e["feed"]["openSearch$totalResults"].$t);pagernum=parseInt(postsnum/postsperpage)+1}for(var o=1;o<postsperpage;o++){if(o==e["feed"]["entry"]["length"]){break}t=e["feed"]["entry"][o];n=t["title"]["$t"];for(var u=0;u<t["link"]["length"];u++){if(t["link"][u]["rel"]=="alternate"){r=t["link"][u]["href"];break}}for(var a=0;a<t["link"]["length"];a++){if(t["link"][a]["rel"]=="replies"&&t["link"][a]["type"]=="text/html"){var f=t["link"][a]["title"]["split"](" ")[0];break}}if("content"in t){var l=t["content"]["$t"]}else{if("summary"in t){var l=t["summary"]["$t"]}else{var l=""}}var c=/<\S[^>]*>/g;l=l["replace"](c,"");if(l["length"]>numchars){l=l["substring"](0,numchars)+"..."}var h=t["published"]["$t"],p=h["substring"](0,4),d=h["substring"](5,7),v=h["substring"](8,10);var m=new Array;if(idMode){m[1]="Jan";m[2]="Feb";m[3]="Mar";m[4]="Apr";m[5]="Mei";m[6]="Jun";m[7]="Jul";m[8]="Agt";m[9]="Sep";m[10]="Okt";m[11]="Nov";m[12]="Des"}else{m[1]="Jan";m[2]="Feb";m[3]="Mar";m[4]="Apr";m[5]="May";m[6]="Jun";m[7]="Jul";m[8]="Aug";m[9]="Sep";m[10]="Oct";m[11]="Nov";m[12]="Dec"}var g=showPostDate?v+" "+m[parseInt(d,10)]+" "+p+" - ":"";var y=showComments?f+" "+commentsLabel:"";if("media$thumbnail"in t){i=t["media$thumbnail"]["url"]}else{i=imgBlank}s+='<div class="itemposts">';s+='<h6><a title="Kode Daftar Isi Blog Simple sampai Tabulasi" href="'+r+'">'+n+"</a></h6>";s+='<div class="iteminside"><a title="Kode Daftar Isi Blog Simple sampai Tabulasi" href="'+r+'"><img alt=" yaitu daftar posting yang sudah dipublikasikan di blog Kode Daftar Isi Blog Simple sampai Tabulasi" src="'+i+'" /></a>';s+=l+"</div>";s+='<div style="clear:both;"></div><div class="itemfoot">'+g+y+'<a class="itemrmore" href="'+r+'">'+rmoreText+"</a></div>";s+="</div>"}document["getElementById"]("results")["innerHTML"]=s;halaman()}function halaman(){countP=0;output="";if(actualpage>1){output+='<a class="prevjson" href="javascript:incluirscript('+parseInt(actualpage-1)+')">'+prevText+"</a>"}else{output+='<span class="prevjson hidden">'+prevText+"</span>"}if(pagernum<maxpage+1){for(countP=1;countP<=pagernum;countP++){if(countP==actualpage){output+='<span class="actual">'+countP+"</span>"}else{output+='<a href="javascript:incluirscript('+countP+')">'+countP+"</a>"}}}else{if(pagernum>maxpage-1){if(actualpage<minpage){for(countP=1;countP<maxpage-2;countP++){if(countP==actualpage){output+='<span class="actual">'+countP+"</span>"}else{output+='<a href="javascript:incluirscript('+countP+')">'+countP+"</a>"}}output+=" ... ";output+='<a href="javascript:incluirscript('+parseInt(pagernum-1)+')">'+parseInt(pagernum-1)+"</a>";output+='<a href="javascript:incluirscript('+pagernum+')">'+pagernum+"</a>"}else{if(pagernum-(minpage-1)>actualpage&&actualpage>minpage-1){output+='<a href="javascript:incluirscript(1)">1</a>';output+='<a href="javascript:incluirscript(2)">2</a>';output+=" ... ";for(countP=actualpage-2;countP<=actualpage+2;countP++){if(countP==actualpage){output+='<span class="actual">'+countP+"</span>"}else{output+='<a href="javascript:incluirscript('+countP+')">'+countP+"</a>"}}output+=" ... ";output+='<a href="javascript:incluirscript('+parseInt(pagernum-1)+')">'+parseInt(pagernum-1)+"</a>";output+='<a href="javascript:incluirscript('+pagernum+')">'+pagernum+"</a>"}else{output+='<a href="javascript:incluirscript(1)">1</a>';output+='<a href="javascript:incluirscript(2)">2</a>';output+=" ... ";for(countP=pagernum-(minpage+1);countP<=pagernum;countP++){if(countP==actualpage){output+='<span class="actual">'+countP+"</span>"}else{output+='<a href="javascript:incluirscript('+countP+')">'+countP+"</a>"}}}}}}if(actualpage<countP-1){output+='<a class="nextjson" href="javascript:incluirscript('+parseInt(actualpage+1)+')">'+nextText+"</a>"}else{output+='<span class="nextjson hidden">'+nextText+"</span>"}document["getElementById"]("halaman")["innerHTML"]=output;var e=actualpage*postsperpage-(postsperpage-1);var t=actualpage*postsperpage;var n=totalPostLabel+" "+postsnum+" - "+jumpPageLabel+" "+e+" - "+t;document["getElementById"]("totalposts")["innerHTML"]=n}function incluirscript(e){if(firstPage==1){removerscript()}document["getElementById"]("results")["innerHTML"]='<div id="loadingscript">'+loadingText+"</div>";document["getElementById"]("halaman")["innerHTML"]="";document["getElementById"]("totalposts")["innerHTML"]="";var t=e*postsperpage-(postsperpage-1);if(sortByLabel){var n=siteUrl+"/feeds/posts/default/-/"+labelSorter+"?start-index="+t}else{var n=siteUrl+"/feeds/posts/default/?start-index="+t}n+="&max-results="+postsperpage;n+="&orderby=published&alt=json-in-script&callback=showpageposts";var r=document["createElement"]("script");r["setAttribute"]("type","text/javascript");r["setAttribute"]("src",n);r["setAttribute"]("id","TEMPORAL");document["getElementsByTagName"]("head")[0]["appendChild"](r);firstPage=1;actualpage=e}function removerscript(){var e=document["getElementById"]("TEMPORAL");var t=e["parentNode"];t["removeChild"](e)}var minpage=4;var maxpage=10;var firstPage=0;var pagernum=0;var postsnum=1;var actualpage=1;onload=function(){incluirscript(1)};document["write"]('<div id="toc-outer">');document["write"]('<div id="results"></div>');document["write"]('<div id="itempager" style="position:relative;"><div id="halaman"></div>');document["write"]('<div id="totalposts"></div></div></div>')
//]]>
</script>

Kode Sitemap Tabulasi

Lihat DEMO

<link rel="stylesheet" href="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.css"/>
<div id="tabbed-toc" class="tabbed-toc"><span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "http://nama_blog.blogspot.com", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' – <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Sumber

Kode Dafta Isi Simple (DEMO)

<script type="text/javascript">
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function loadtoc(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 m=n.published.$t.substring(0,10);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;postDate[ii]=m;postUrl[ii]=j;postMp3[ii]=o;if(h<10){postBaru[ii]=true}else{postBaru[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><a href="http://h-e-r-u.blogspot.com" style="font-size: 1px; text-decoration:none; color: #ffffff;">heru blog</a>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[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=postMp3[e];postMp3[e]=postMp3[g];postMp3[g]=f;var f=postBaru[e];postBaru[e]=postBaru[g];postBaru[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,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=postDate[f];postDate[f]=postDate[h];postDate[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=postMp3[f];postMp3[f]=postMp3[h];postMp3[h]=g;var g=postBaru[f];postBaru[f]=postBaru[h];postBaru[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="Judul Artikel";var m="Klik untuk sortir menurut judul";var d="Tanggal";var k="Klik untuk Sortir bedasarkan tanggal";var c="Kategori";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Klik untuk menampilkan semua"}h+="<table>";h+="<tr>";h+='<td class="toc-header-col1">';h+='<a href="javascript:toggleTitleSort();" title="Kode Daftar Isi Blog Simple sampai Tabulasi">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='<a href="javascript:toggleDateSort();" title="Kode Daftar Isi Blog Simple sampai Tabulasi">'+d+"</a>";h+="</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();" title="Kode Daftar Isi Blog Simple sampai Tabulasi">'+c+"</a>";h+="</td>";h+='<td class="toc-header-col4">';h+="Download MP3";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel<br/></span>"}else{var f='<span class="toc-note">Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"}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><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postBaru[a]==true){document.write(' - <strong><em><span style="color: rgb(255, 0, 0);">New !!</span> </em></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Menampilkan Daftar Isi</a> <img src="http://radiorodja.googlepages.com/new_1.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Download mp3 : <a href="'+postMp3[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

Sumber https://testemplatecb.blogspot.com/

Marwan

Kode Daftar Isi Blog Simple Sampai Tabulasi

Menu Halaman Statis