Membuat Halaman Arsip tanpa JavaScript

Setiap blogger pasti tahu, apa yang dimaksud dengan halaman arsip? Ya, betul sekali. Halaman itu terdiri dari kumpulan posting yang tersusun secara teratur, baik berdasarkan tahun, bulan, tanggal terbit, kategori, label, atau berisi keseluruhan item — yang telah disebutkan sebelumnya — dan sebagainya. Banyak sekali metode yang dapat dimanfaatkan untuk membuat halaman arsip, antara lain: menggunakan JavaScript & widget.

Trik blogger kali ini “Optimasi Blog” akan berbagi tentang membuat halaman arsip dengan menggunakan widget arsip dan widget label pada Blogger™. Ini didapat dari hasil blog-walking ke “Simple Blogger Tutorial” dalam posting Create a Separate Label or Archive Page in Blogger yang ditulis oleh Raju.

Petama, buatlah terlebih dulu sebuah halaman statis yang akan menampilkan arsip — contoh: Arsip — sehingga akan terbentuk sebuah permalink baru, seperti: h**p://namablog.blogspot.com/p/arsip.html. Isilah halaman itu dengan kalimat pembuka atau lainnya.

Kedua, masuk ke akun Blogger.com & pergi ke “Edit HTML”. Backup terlebih dulu template sebelum melakukan trik blogger ini. Perhatikan pula struktur pengkodean template, karena sangat dimungkinkan akan berbeda. Cari kode berikut, kemudian tambahkan kode yang berwarna merah di bawahnya.

  <b:section class='main' id='main' maxwidgets='1' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
  <b:section class='main' id='main1' maxwidgets='2' showaddelement='yes'/>

Jangan lupa disimpan & sekarang Anda telah memiliki elemen baru di bawah “Posting Blog”, dengan selector class='main' dan id='main1'. Elemen itu dapat Anda tambahkan maksimal 2 gadgetmaxwidgets='2' — pada dashboard Blogger™ dalam menu “Tata Letak” (Layout).

Ketiga, tambahkan widget label dan widget arsip dengan mengklik add a gadget, sehingga tidak ada lagi opsi add a gadget pada elemen di bawah “Posting Blog”. Oleh karena kedua widget tersebut akan ditampilkan hanya pada halaman tertentu, yakni h**p://namablog.blogspot.com/p/arsip.html, maka diperlukan kustomisasi dengan memanfaatkan conditional tags.

Blogger.com Layout

Keempat, kembali ke “Edit HTML” & centang Expand Widget Templates. Cari kode berikut — dalam widget arsip maupun widget label — kemudian sisipkan dengan kode yang berwarna hijau.

<b:widget … >
<b:includable id='main'>
<b:if cond='data:blog.url == "h**p://namablog.blogspot.com/p/arsip.html"'> <!-- sesuaikan alamat dengan halaman yang dibuat untuk arsip -->
  …code widgets…
</b:if>
</b:includable>
</b:widget>

Conditional tags di atas berarti bahwa, widget akan ditampilkan hanya pada halaman dengan alamat h**p://namablog.blogspot.com/p/arsip.html, selain URL tersebut maka widget tidak akan ditampilkan.

Kelima, apabila menuju halaman lain — selain h**p://namablog.blogspot.com/p/arsip.html — masih terlihat janggal. Yah, mungkin tersisa ruang kosong karena pengaruh pengkodean elemen, seperti margin atau padding. Coba tambahkan CSS berikut di bawah ]]></b:skin>.

<b:if cond='data:blog.url != "h**p://namablog.blogspot.com/p/arsip.html"'>
<style>
#main1 {
  display: none;
}
</style>
</b:if>

CSS (Cascading Style Sheets) di atas dimaksudkan, jika URL bukan h**p://namablog.blogspot.com/p/arsip.html, maka selector id='main'#main1 — disembunyikan.

Untuk demontrasi trik blogger di atas, silakan klik taut arsip “Optimasi Blog”. Apabila terdapat kekeliruan dalam deskripsi tentang membuat halaman arsip tanpa javascript, mari kita perbaiki bersama melalui kolom komentar. Begitu pula jika terdapat pertanyaan atau kritik dapat kita diskusikan pada media yang sama pula.

15 komentar untuk “Membuat Halaman Arsip tanpa JavaScript”

  1. tutorial yang menarik.. namun saya kurang familiar dengan blogspot..

    BalasHapus
    Balasan
    1. @taufik menggunakan WordPress™, malah lebih mudah untuk membuat halaman arsip, baik dengan plugin atau tanpa plugin.

      Hapus
  2. Tipsnya keren juga, bisa membuat halaman arsip dengan mudah ya.

    BalasHapus
  3. Saya udah buat Mas sekalian sama scroolnya guna hemat sidebar.

    BalasHapus
    Balasan
    1. Yah, seperti itu malah lebih bagus, gan. :)

      Hapus
  4. Thanks info nya gan ,, saya akan coba , kebetulan saya iseng2 buat blog :D

    BalasHapus
  5. jadi gak bikin loading blog berat ya ???

    BalasHapus
    Balasan
    1. Relatif, gan. Trik ini hanya merupakan alternatif lain untuk menampilkan arsip blog dengan menggunakan widget.

      Hapus
  6. Saya udah buat Mas...khusus halaman tersendiri.

    BalasHapus
  7. Kok makin bingung gan..?? terus apa bedanya dengan widget arasip bawaan blogger..?? Oya, ada yang bilang arsip blog itu bisa bikin duplikat kontent ya..?? artinya arsip blog tidak bagus untuk optimasi blog donk gan..???

    BalasHapus
    Balasan
    1. @Blogger Tulalit — tidak ada bedanya, cuma yang disorot pada tata letaknya. Arsip Blog tidak akan menjadi duplicate content selama menggunakannya secara tepat. Dan lagi bukankah telah ada pengaturan robots header tags dengan opsi-opsi yang menarik. Misalnya: untuk halaman arsip dan pencarian (archive and search), pilih “noindex” dan “noarchive”. Jadi halaman arsip sangat berguna untuk pengunjung, ketika ingin menelusuri artikel/posting dalam situs web atau blog, sehingga arahnya lebih kepada kebergunaan. Apakah kebergunaan sebuah situs web atau blog merupakan optimasi blog? Pasti!

      Hapus
  8. berbagi itu lebih baik . alhamdulillah bertemu web ini .
    trimakasih

    BalasHapus
  9. salam kenal sob..
    usul kalau bisa dikasih gambar previewnya kayak gmn..

    BalasHapus
    Balasan
    1. @Terbaik Indonesia — Azzz… gambar contoh serta demonya kan sudah ada.

      Hapus