Membuat Laman Sitemap (Recent Posts) di Blogger

Mengapa blog butuh Recent Post?

Membuat Laman Recent Posts (Daftar Isi) di Blogger ― Sebuah blog pada umumnya akan terdiri dari beberapa tulisan/artikel/posting yang diurutkan berdasarkan waktu dengan ppembahasan tertentu pada setiap posting tersebut. Jadi biasanya blog akan mempunyai banyak artikel di dalamnya.

Biasanya ketika seseorang mencari informasi di internet, tidak jarang blog merupakan penyaji informasi yang dibutuhkan tersebut. Dan tidak jarang pulang orang-orang lebih memilih mencari informasi di blog yang cenderung lebih variatif dan disajikan dengan bahasa yang lebih sederhana atau lebih mudah dimengerti.

Oleh karena itu, beberapa blog di internet, khususnya dari Blogger, biasanya akan dilengkapi dengan sebuah fitur yang memudahkan pengunjungnya untuk melihat-lihat isi dari blog tersebut. Yaitu fitur halaman recent post atau halaman daftar isi. Yaitu merupakan halaman yang berisi daftar semua judul posting yang ada dalam blog tersebut.

Bagaimana membuat recent post/daftar isi?

Ada berbagai jenis laman recent post yang bisa dibuat dengan bentuk yang berbeda-beda. Misalnya laman daftar isi yang dikategorikan berdasarkan label postingan atau ada juga yang diurutkan berdasarkan waktu, atau juga gabungan dari keduanya. Pada dasarnya mempunyai fungsi yang sama yaitu untuk menampilkan daftar semua posting yang ada dalam blog tersebut.

Sebenarnya untuk membuat halaman recent post atau daftar isi blog caranya cukup sederhana. Dalam posting kali ini akan dibahas beberapa jenis recent post yang bisa dipasang di blog, jadi kamu bisa memilih recent post atau daftar isi blog seperti apa yang ingin kamu gunakan. Silakan lihat pada beberapa demo berikut ini sebagai contohnya.

• Daftar isi blog diurutkan berdasarkan waktu (Demo 1): lihat demo
• Daftar isi blog dikategorikan berdasarkan label (Demo 2): lihat demo
• Daftar isi blog dikategorikan dengan label (update) (Demo 3): lihat demo

Untuk membuat dan memasang recent post (daftar isi blog) seperti yang di atas, kamu bisa mengikuti langkah-langkah berikut ini:

1. Buka Blogger kemudian buatlah sebuah Halaman Statis baru dengan judul terserah keinginan kamu, misalnya Sitemap, Table of Content, atau Recent Post.
2. Pada mode penulisan HTML (pada Blogger versi terbaru klik ikon dengan simbol <>) kemudian tambahkan kode di bawah ini. Pilih sesuai jenis yang kamu inginkan.
# Demo 1

<script src="https://code.maringngerrang.com/by-time.js"></script>
<script src="https://www.maringngerrang.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

# Demo 2

<script src="https://code.maringngerrang.com/by-label.js"></script>
<script src="https://www.maringngerrang.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

# Demo 3

<div class="tabbed-toc" id="tabbed-toc"><span class="loading">Memuat…</span></div><script>/*!
* Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
* Free for change but keep the original attribution.
* URL: https://plus.google.com/108949996304093815163/about
*/
var link=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href='https://code.maringngerrang.com/recent-post-lmgz.css';document.getElementsByTagName('HEAD')[0].appendChild(link);
var tabbedTOC={blogUrl:"https://www.maringngerrang.com/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:red;">New!</em>'};
!function(a,b){var c=(new Date).getTime(),d={blogUrl:"http://dte-feed.blogspot.com",containerId:"tabbed-toc",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' &ndash; <em style="color:red;">Baru!</em>'};if("undefined"==typeof tabbedTOC)tabbedTOC=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTOC[e]?tabbedTOC[e]:d[e];a["clickTabs_"+c]=function(a){for(var b=document.getElementById(d.containerId),c=b.getElementsByTagName("ol"),e=b.getElementsByTagName("ul")[0],f=e.getElementsByTagName("a"),g=0,h=c.length;h>g;++g)c[g].style.display="none",c[parseInt(a,10)].style.display="block";for(var i=0,j=f.length;j>i;++i)f[i].className="",f[parseInt(a,10)].className="active-tab"},a["showTabs_"+c]=function(e){for(var f=parseInt(e.feed.openSearch$totalResults.$t,10),g=d,h=e.feed.entry,i=e.feed.category,j="",l=0;l<(g.showNew===!0?5:g.showNew)&&l!==h.length;++l)h[l].title.$t=h[l].title.$t+(g.showNew!==!1?g.newText:"");h=g.sortAlphabetically?h.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):h,i=g.sortAlphabetically?i.sort(function(a,b){return a.term.localeCompare(b.term)}):i,j='<span class="toc-line"></span><ul class="toc-tabs">';for(var m=0,n=i.length;n>m;++m)j+='<li class="toc-tab-item-'+m+'"><a onclick="clickTabs_'+c+"("+m+');return false;" onmousedown="return false;" href="javascript:;">'+i[m].term+"</a></li>";j+="</ul>",j+='<div class="toc-content">';for(var o=0,n=i.length;n>o;++o){j+='<ol class="panel" data-category="'+i[o].term+'"',j+=o!=g.activeTab-1?' style="display:none;"':"",j+=">";for(var p=0;f>p&&p!==h.length;++p){for(var q,r=h[p],s=r.published.$t,t=g.monthNames,u=r.title.$t,v=("summary"in r&&g.showSummaries===!0?r.summary.$t.replace(/<br *\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.numChars)+"&hellip;":""),w=("media$thumbnail"in r&&g.showThumbnails===!0?'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+r.media$thumbnail.url.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+g.noThumb.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>'),x=r.category||[],y=g.showDates?'<time datetime="'+s+'" title="'+s+'">'+s.substring(8,10)+" "+t[parseInt(s.substring(5,7),10)-1]+" "+s.substring(0,4)+"</time>":"",z=0,A=r.link.length;A>z;++z)if("alternate"===r.link[z].rel){q=r.link[z].href;break}for(var B=0,C=x.length;C>B;++B){var D=g.newTabLink?' target="_blank"':"";x[B].term===i[o].term&&(j+='<li title="'+x[B].term+'"',j+=g.showSummaries?' class="bold"':"",j+='><a href="'+q+'"'+D+">"+u+y+"</a>",j+=g.showSummaries?'<span class="summary">'+w+v+'<span style="display:block;clear:both;"></span></span>':"",j+="</li>")}}j+="</ol>"}j+="</div>",j+='<div style="clear:both;"></div>',b.getElementById(g.containerId).innerHTML=j,a["clickTabs_"+c](g.activeTab-1)};var f=b.getElementsByTagName("head")[0],g=b.createElement("script");g.src=d.blogUrl.replace(/\/+$|[\?&#].*$/g,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+d.maxResults+"&orderby=published&callback=showTabs_"+c,"onload"!==d.preload?a.setTimeout(function(){f.appendChild(g)},d.preload):a.onload=function(){f.appendChild(g)}}(window,document);</script>

3. Ganti bagian yang ditandai dengan alamat blog kamu.
4. Setelah itu simpan dan publikasikan halaman tersebut lalu bukan alamat halaman tersebut kemudian lihat hasilnya.

Penutup

Itulah langkah-langkah dan cara yang bisa kamu gunakan untuk membuat dan memasang halaman recent post atau daftar isi blog di Blogger. Kamu bebas memilih salah satu dari tiga jenis recent post di atas sesuai yang kamu sukai. Jangan lupa tinggalkan komentar kamu di bawah biar blog ini makin semangat membuat postingan. Terima kasih dan sampai jumpa!