Buat Archive List Sederhana di Blogger

Saya bingung sekali! Saya tidak tahu bagaimana cara membuat halaman archive untuk blog saya tercinta. Namun setelah saya selesai merapih blog ini, saya mulai mencari-cari bagaimana cara membuat halaman archive yang bagus tapi sederhana. Tampilannya sepeti daftar isi atau sitemap yang hanya berisi daftar judul posting yang tersusun rapih kebawah beserta tanggal posting dan diurutkan dari posting yang paling baru. Namun kebanyakan tidak cocok dengan selera saya dan saya tepaksa membuatnya dengan cara manual. Kenapa saya begitu menginginkan halaman archives?

Apa halaman archives itu penting?
Tentu saja penting. Bahkan bagi saya itu sangat penting terutama untuk menambah kedalaman blog, meningkatkan kredibilitas blog dan juga memupuk loyalitas pembaca blog anda. Dengan adanya halaman archives pembaca juga dapat menelusuri postingan anda yang sudah usang lagi berdebu. Memberi kesempatan kepada pembaca untuk mengenal dan mengetahui lebih banyak dari blog anda. Juga menambahkan jumlah waktu pengunjung menghabiskan waktu di blog anda yang pada akhirnya menyebabkan mereka terjaga untuk tetap telibat dan setia dengan blog anda. Jangan biarkan posting lama anda terabaikan begitu saja! Okey 😉

Baca juga: Cara Merubah Tampilan Archive Gadget Bawaan Blogger Menjadi Lebih Keren

Barusan saya menemukan ini GitHub Make Archive Page in Blogger oleh jhwilson. Dengan memanfaatkan Javascript untuk mengambil JSON dari Google API di Blogger lalu mengubahnya menjadi html yang mampu menampilkan daftar judul posting berserta hyperlink posting lalu diikuti dengan tanggal. Anda bisa melihat halaman archives saya secara langsung atau gambar berikut ini:

Cara Membuat Archive Page Sederhana

1. Pertama: Buat Sebuah Laman Baru
Masuk ke Blogger dan pilih Laman lalu klik Laman baru.

2. Kedua: Customize Laman
Masukkan judul laman yang anda inginkan. Selanjutnya klik HTML.

3. Ketiga: Tambahkan JavaScript Archives
Copy lalu paste salah satu kode javascript berikut dan letakan pada kolom HTML.

<script type="text/javascript" src="//cloud.github.com/downloads/jhwilson/Create-a-Blogger-archive-page/Make-Blogger-Archive-Page.js"></script>
<script src="//adiharistwn.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive"></script>

Atau juga bisa gunakan javascript di bawah ini saja.
Saya sendiri lebih memilih javascript berikut, karena beberapa detik lebih cepat ketimbang yang diatas (versi originalnya) yang mengharuskan terhubung dengan cloud.github.com saat pemuatan javascript tersebut.

<div class="ArchiveList"><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;
    for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
    {
 NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]
 document.write('<a href ="'+PostURLs[EntryNum]+'">'+PostTitles[EntryNum]+"</a> ("+NameOfMonth+" "+parseInt(PostDays[EntryNum],10)+", "+PostYears[EntryNum]+")<br />");
    }
}</script>
<script src="//adiharistwn.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive"></script></div>

4. Keempat: Merubah Url Blog
Ubah tulisan adiharistwn.blogspot.com dengan url blog anda.

5. Terakhir: Publikasikan
Modif halaman archives sesuai yang anda inginkan lalu simpan dan klik Publikasikan.

Itu saja. Saya harap ini membantu. Tolong beritahu saya jika ini bekerja pada anda. Dan jika anda memiliki pertanyaan mengenai hal ini, jangan ragu untuk mengomentari saya.

Jika anda rasa ini bermanfaat, sebarkan cinta dan share ini. 😉