Cara Membuat Halaman Indeks, Arsip, atau Daftar Isi Blog

Baca Juga

HALAMAN Indeks atau Arsip ini mirip dengan halaman Daftar Isi Blog (Sitemap). Hanya saja, daftar judul posting ditampilkan berdasarkan bulan dan tanggal publikasi. Demonya bisa dilihat di Indeks.

Karena hakikatnya sama, maka kode di bawah ini bisa juga digunakan untuk membuat halaman khusus daftar isi blog (sitemap).

Nama halamannya juga bisa Indeks, Arsip, Daftar Isi, atau Sitemap. Bebas lah.

Fungsi halaman indeks ini sebagai navigasi sekaligus internal links yang memudahkan kita dan pengunjung untuk membuka-buka halaman blog kita.

Cara Membuat Halaman Indeks, Arsip, atau Daftar Isi Blog

Marik kita mulai membuat Membuat Halaman Indeks, Arsip, atau Daftar Isi Blog:
1. Klik "Page" > "New Page"
2. Langsung isi judul dengan "Indeks"
3. Klik mode HTML. Perhatikan gambar berikut ini.

Isi judul dan klik HTML:

4. Copas kode berikut ini di kolom Content:

<script type="text/javascript">
function LoadTheArchive(TotalFeed) 
{
    var PostTitles = new Array();
    var PostURLs = new Array();
    var PostYears = new Array();
    var PostMonths = new Array();
    var PostDays = new Array();
    if("entry" in TotalFeed.feed) 
    {
 var PostEntries=TotalFeed.feed.entry.length;
 for(var PostNum=0; PostNum<PostEntries ; PostNum++) 
 {
     var ThisPost = TotalFeed.feed.entry[PostNum];
     PostTitles.push(ThisPost.title.$t);
     PostYears.push(ThisPost.published.$t.substring(0,4));
     PostMonths.push(ThisPost.published.$t.substring(5,7));
     PostDays.push(ThisPost.published.$t.substring(8,10));
     var ThisPostURL;
     for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++) 
     {
  if(ThisPost.link[LinkNum].rel == "alternate") 
  {
      ThisPostURL = ThisPost.link[LinkNum].href;
      break
  }
     }
     PostURLs.push(ThisPostURL);
 }
    }
    DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);
}

function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays)
{
    var MonthNames=["January","February","March","April","May","June","July","August","September","October","November","December"];
    var NumberOfEntries=PostTitles.length;

    var currentMonth = "";
    var currentYear = "";

    for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
    {
 NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]

 if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
  currentMonth = NameOfMonth;
  currentYear = PostYears[EntryNum];

  document.write("<div class='dateStyle'><br />" + currentMonth+" "+currentYear+" </div>");
 }

  document.write('<a href ="'+PostURLs[EntryNum]+'"><div class=dayStyle>'+parseInt(PostDays[EntryNum],10)+":&nbsp;&nbsp;</div> "+PostTitles[EntryNum]+"</a><br />");
    }
}
</script>

<script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive" />
</script>

<!--CUSTOMIZATION-->
<style type="text/css">
.dateStyle {
     color:#000;
     font-weight:bold;
     font-size: 15px;
     font-family: Arial, sans-serif;
     margin: 0;
}

.dayStyle {
     color:#000;
     font-weight:bold;
     font-family: Arial, sans-serif;
     display: inline-block;
}

</style>

5. Ganti alamat blognya dengan url blog Anda.
6. Publish!

Sumber