Membuat Arsip Artikel Blog Dengan Fitur postQuickEdit

Sekarang itu tidak perlu bikin artikel-artikel baru jika topik yang ingin dibahas ternyata sudah pernah dibuat di artikel lama. Cukup lakukan update artikel lama agar isinya tetap relevan dengan kondisi saat ini. Selain tidak perlu capek dan mikir ulang dari awal, cara ini juga bisa membantu menjaga agar informasi yang ada di blog tetap sesuai dengan kebutuhan pembaca.

Kalau dipikir-pikir memang iya, artikel lama perlu diperbarui jika isinya sudah tidak sesuai dengan keadaan sekarang. Jangan sampai artikel yang sudah tidak relevan masih ditemukan di halaman pertama Google, sedangkan ada artikel lain yang lebih lengkap dan terbaru justru berada jauh di halaman pencarian. Apalagi jika informasi di dalamnya sudah ketinggalan zaman dan tidak lagi menjawab kebutuhan pengguna.

Ah, kalau urusan indeks dan peringkat pencarian tentu saja tetap menjadi keputusan Google. Namun, sebagai pemilik blog, kita juga perlu memperhatikan kualitas konten yang sudah diterbitkan agar informasi di dalamnya tetap relevan dan bermanfaat bagi pembaca.

Untuk memperbarui artikel lama satu per satu, tentunya membutuhkan waktu dan tenaga, apalagi jika jumlah artikelnya sudah ratusan bahkan sampai ribuan. Bingung harus dimulai dari mana, membuka menu Postingan di dashboard Blogger juga tidak selalu praktis. Kita harus mencari judul artikel yang ingin diperbarui, dan kalau jumlahnya sudah banyak, pekerjaan seperti ini bisa cukup merepotkan.

Menerapkan Fungsi postQuickEdit di Blogger

Beberapa tahun yang lalu, Blogger memiliki berbagai fitur bawaan yang bisa digunakan tanpa harus menambahkan kode pihak ketiga. Sebagian fungsi tersebut masih bisa ditemukan di dalam template, meskipun terkadang perlu penyesuaian agar dapat bekerja dengan baik pada template yang digunakan.

Salah satunya adalah fitur postQuickEdit. Fitur ini berfungsi menampilkan ikon edit yang memungkinkan pemilik blog membuka editor artikel secara langsung dari halaman blog ketika memiliki akses yang sesuai. Dengan adanya fitur ini, kita tidak perlu selalu membuka menu Postingan di dashboard Blogger hanya untuk mencari artikel yang ingin diedit.

Sama seperti yang saya alami, awalnya saya melakukan update artikel lama melalui menu Postingan. Saya harus mencari artikel satu per satu, mulai dari artikel lama yang ingin diperbarui. Cara ini terasa kurang praktis karena setelah selesai mengedit, posisi daftar Postingan terkadang kembali ke bagian tengah sehingga saya harus mencari lagi artikel berikutnya.

Dari situ saya berpikir, bagaimana caranya membuat daftar semua artikel blog yang dilengkapi nomor urut, judul artikel, dan tombol edit? Dengan begitu, saya bisa mencari artikel yang ingin diperbarui melalui satu halaman khusus tanpa harus terus-menerus membuka dashboard Blogger.

Saya kemudian mencoba dua cara. Cara pertama adalah membuat halaman arsip artikel menggunakan JavaScript dan Blogger Feed API. Daftar artikel ditampilkan dalam bentuk grid, dilengkapi nomor urut, judul artikel, serta tombol untuk membuka editor. Cara kedua adalah mencoba mengaktifkan kembali fungsi postQuickEdit yang sudah tersedia di dalam template Blogger.

Awalnya, kode postQuickEdit yang ada di template saya tidak menampilkan ikon edit. Padahal, kode includable dan pemanggilannya sudah tersedia. Blog saya menggunakan template dengan struktur Blogger versi 2, sehingga saya mencoba menyesuaikan kode yang sebelumnya menggunakan data:post.editUrl.

Setelah mengganti cara pembentukan URL editor, hasilnya berhasil! Ikon Quick Edit akhirnya bisa ditampilkan pada template yang saya gunakan. Dari pengujian ini, saya menemukan bahwa masalahnya bukan sekadar perbedaan versi Blogger, melainkan juga cara kode template menentukan URL untuk mengedit artikel.

Karena itu, sebelum mencoba kode berikut, perlu diperhatikan bahwa hasil pengujian ini berasal dari template yang saya gunakan. Dukungan terhadap ekspresi template dan ketersediaan data bisa berbeda, sehingga kode alternatif tetap perlu diuji pada template masing-masing.

Kode postQuickEdit Sebelum Disesuaikan

Berikut adalah contoh kode postQuickEdit yang menggunakan data:post.editUrl. Kode seperti ini bisa ditemukan pada template Blogger tertentu.

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>
      </a>
    </span>
  </b:if>
</b:includable>

Pada kode tersebut, ikon edit hanya ditampilkan jika data:post.editUrl tersedia. Jika kondisi tersebut tidak terpenuhi, bagian ikon tidak akan dirender. Inilah salah satu bagian yang perlu diperiksa ketika Quick Edit tidak muncul meskipun tidak ada CSS yang menyembunyikannya.

Kode postQuickEdit Setelah Disesuaikan

Karena kode sebelumnya tidak berfungsi pada template yang saya gunakan, saya mengganti cara pembentukan URL editor. Kode berikut berhasil menampilkan ikon Quick Edit pada blog saya.

<b:includable id='postQuickEdit' var='post'>
  <b:with value='data:view.isPage ? &quot;blog/page/edit/&quot; : &quot;blog/post/edit/&quot;' var='path'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:blog.bloggerUrl path (data:path + data:blog.blogId + &quot;/&quot; + data:post.id)' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' width='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif'/>
      </a>
    </span>
  </b:with>
</b:includable>

Perbedaannya terletak pada cara menentukan URL editor. Kode yang baru menggunakan data:blog.bloggerUrl, data:blog.blogId, dan data:post.id untuk membentuk alamat editor berdasarkan jenis konten dan identitas postingan.

Bagian data:view.isPage digunakan untuk menentukan apakah URL editor yang dibuat ditujukan untuk halaman statis atau artikel. Sementara itu, data:post.adminClass tetap digunakan untuk mempertahankan mekanisme kontrol admin pada template.

Perlu diingat, kode ini merupakan hasil penyesuaian yang berhasil pada template saya. Jadi, jangan langsung menyimpulkan bahwa semua template Blogger versi 1 harus menggunakan kode pertama dan semua template versi 2 harus menggunakan kode kedua. Jika Quick Edit tidak muncul, periksa struktur template dan cara URL edit dibentuk terlebih dahulu.

Memanggil Includable postQuickEdit

Setelah kode includable tersedia, Blogger perlu memanggilnya dari bagian template yang sesuai. Pemanggilan yang umum digunakan adalah sebagai berikut.

<b:include data='post' name='postQuickEdit'/>

Pastikan pemanggilan tersebut berada di bagian template yang memang dirender untuk artikel atau halaman yang ingin ditampilkan ikon editnya. Jika hanya menambahkan kode includable tanpa pemanggilan, isi di dalamnya tidak otomatis muncul di halaman blog.

Selain itu, ikon Quick Edit berkaitan dengan akses administrator. Pengunjung biasa tidak memiliki izin untuk mengedit artikel, meskipun suatu tautan edit ditampilkan oleh template.

Membuat Arsip Artikel Blog

Bagaimana cara membuat arsip artikel blog seperti yang ada di halaman blog ini? Untuk membuatnya sebenarnya cukup mudah. Kita bisa menggunakan Blogger Feed API untuk mengambil daftar artikel, kemudian menampilkannya menggunakan HTML, CSS, dan JavaScript.

Dalam halaman arsip yang saya buat, setiap artikel ditampilkan dengan nomor urut dan judul. Saya juga menambahkan ikon edit yang membuka editor artikel di tab baru. Perlu diketahui, ikon edit pada daftar ini dibuat melalui JavaScript, bukan dengan memanggil includable postQuickEdit secara langsung.

Jadi, ada dua mekanisme yang berbeda. Includable postQuickEdit merupakan bagian dari sistem template Blogger, sedangkan tombol edit pada halaman arsip dibuat secara dinamis menggunakan data dari Feed API dan URL editor yang disusun berdasarkan ID blog serta ID postingan.

Buat Halaman Arsip Blog

Pertama, buat halaman baru melalui dashboard Blogger, kemudian beri judul Arsip Blog atau nama lain sesuai keinginan. Halaman ini nantinya digunakan untuk menampilkan daftar artikel beserta nomor urut, judul, dan ikon edit.

Setelah halaman dibuat, buka editor HTML Blogger untuk memasukkan kode CSS, HTML, dan JavaScript berikut.

Masukkan Kode CSS

Kode CSS berikut digunakan untuk mengatur tampilan daftar artikel dalam bentuk grid, jarak antarartikel, tampilan nomor urut, tombol Muat Lainnya, serta ikon Quick Edit.

<style>
#archive-grid-container,#main-wrapper{width:100%;margin:0 auto;font-family:Arial,sans-serif;color:var(--primary-color)}
#archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px 25px;padding:10px 0}
.post-item{background:var(--primary-bg);font-size:14px;line-height:1.3;display:flex;align-items:center;gap:8px;border-radius:7px}
.post-item a{text-decoration:none;color:var(--primary-color)}
.post-item a:hover{color:#008cff;text-decoration:underline}
.post-num{font-weight:bold;color:#777;min-width:38px;flex-shrink:0;display:inline-block;text-align:right;margin-right:4px}
#load-more-btn{display:block;width:250px;margin:30px auto;padding:12px;background-color:#444;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:0.3s}
#load-more-btn:hover{background-color:#000}
#load-more-btn:disabled{background-color:#ccc;cursor:not-allowed}
@media (max-width:768px){#archive-grid{grid-template-columns:1fr}.post-item{border-radius:0}}
#status-msg{text-align:center;margin-top:10px;font-style:italic}
.quick-edit{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:25px;height:25px;margin-left:5px;border-radius:5px;color:#008cff;font-size:17px;line-height:1;text-decoration:none}
.quick-edit:hover{background:rgba(0,140,255,.1);color:#006dcc}
</style>

Masukkan Kode HTML

Berikut adalah struktur HTML untuk menampung daftar artikel, tombol Muat Lainnya, dan pesan status ketika semua artikel sudah ditampilkan.

<div id="archive-grid-container">
  <div id="archive-grid"></div>
  <button id="load-more-btn" onclick="handleLoadMore()">Muat Lainnya</button>
  <div id="status-msg"></div>
</div>

Masukkan Kode JavaScript

JavaScript berikut mengambil daftar artikel melalui Feed API, menampilkan judul artikel, membuat nomor urut, dan menambahkan ikon edit yang membuka editor di tab baru.

<script>
let startIdx=1,postCounter=1,isEndOfFeed=!1,btnText="";const apiMax=150;
async function fetchPosts(e,t){const n=await fetch(`/feeds/posts/summary?alt=json&start-index=${t}&max-results=${e}`),a=await n.json();return a.feed.entry||[]}
async function handleLoadMore(){if(isEndOfFeed)return;const e=document.getElementById("load-more-btn"),t=document.getElementById("status-msg");btnText||(btnText=e.innerText),e.disabled=!0,e.innerText="Memuat...";try{let n=await fetchPosts(apiMax,startIdx);if(startIdx+=n.length,n.length===apiMax){let a=await fetchPosts(50,startIdx);n=n.concat(a),startIdx+=a.length}n.length>0?(renderPosts(n),e.disabled=!1,e.innerText=btnText,n.length<200&&finishFeed()):finishFeed()}catch(r){console.error("Error:",r),e.disabled=!1,e.innerText=btnText}}
function renderPosts(e){const t=document.getElementById("archive-grid");e.forEach(e=>{let n=e.title.$t,a=e.link.find(e=>"alternate"===e.rel).href,m=e.id.$t.match(/blog-(\d+)\.post-(\d+)/),r=document.createElement("div");r.className="post-item",r.innerHTML=`<span class="post-num">${postCounter}.</span><a href="${a}" target="_blank" rel="noopener">${n}</a>${m?`<a class="quick-edit" href="https://www.blogger.com/blog/post/edit/${m[1]}/${m[2]}" target="_blank" rel="noopener noreferrer" title="Edit artikel" aria-label="Edit artikel">&#9998;</a>`:""}`,t.appendChild(r),postCounter++})}
function finishFeed(){isEndOfFeed=!0,document.getElementById("load-more-btn").style.display="none",document.getElementById("status-msg").innerText="Semua artikel telah ditampilkan."}
handleLoadMore();
</script>

Setelah semua kode dimasukkan, simpan halaman dan buka hasilnya untuk memastikan daftar artikel tampil dengan benar. Tombol Muat Lainnya digunakan untuk mengambil artikel berikutnya, sedangkan ikon pensil membuka URL editor sesuai ID blog dan postingan yang diperoleh dari data Feed API.

Perlu diperhatikan bahwa ikon pensil yang dibuat melalui JavaScript tidak otomatis menggunakan mekanisme item-control dan adminClass seperti Quick Edit bawaan template. Karena itu, ikon tersebut bisa terlihat oleh pengunjung lain. Namun, hak untuk mengedit artikel tetap bergantung pada akun Google yang digunakan untuk membuka editor.

Cek Halaman Arsip

Atur Lebar Tampilan Arsip

Jika halaman Arsip Blog ingin dibuat lebih lebar, misalnya hingga 1100px, tetapi tampilannya masih dibatasi oleh sidebar, kamu bisa menyesuaikan CSS sesuai struktur template yang digunakan.

Contohnya, jika sidebar tidak diperlukan pada halaman arsip, kamu bisa menyembunyikannya menggunakan kode berikut.

#sidebar-wrapper{display:none}

Letakkan CSS tersebut di dalam kode halaman arsip. Perlu diingat, nama ID sidebar setiap template bisa berbeda, jadi sesuaikan dengan struktur template blog yang digunakan.

Dengan halaman arsip seperti ini, mencari artikel lama menjadi lebih praktis. Kita bisa melihat daftar judul artikel dalam satu halaman dan membuka editor melalui ikon pensil tanpa harus terus-menerus mencari judul artikel dari menu Postingan di dashboard Blogger.