Mecha versi 2.6.4 sudah dirilis!

Daftar Label pada Gawai Pos Populer Blogger

Cara menampilkan daftar label pada gawai pos populer dengan atau tanpa JavaScript.

Data standar dalam sebuah gawai pos populer sangat terbatas dan maksimal hanya mampu menampilkan properti pos berupa judul, tautan, deskripsi dan keluku. Idealnya, kita harusnya bisa menggunakan metode ini untuk menampilkan daftar label pada setiap item pos dalam sebuah gawai:

<b:widget id='PopularPosts1' type='PopularPosts'>
  <ul>
    <b:loop values='data:posts' var='post'>
      <li>
        …
        …
        <b:if cond='data:post.labels'>
          <p>
            <b:loop values='data:post.labels' var='label'>
              <data:label.name/>
            </b:loop>
          </p>
        </b:if>
      </li>
    </b:loop>
  </ul>
</b:widget>

Tapi cara tersebut tidak berhasil karena data label ternyata tidak ada. Kadang Saya juga berpikiran untuk menampilkan data tanggal publikasi pos tapi data tersebut ternyata juga tidak ada. Satu-satunya data minimal yang bisa Saya ambil saat ini hanya ID pos. Dan data tersebut sebenarnya sudah cukup sebagai modal untuk menampilkan tanggal publikasi dan daftar label dari pos… dengan JavaScript.

Dengan menambahkan ID pos pada tautan umpan, maka umpan yang dikembalikan akan berupa item pos. Di dalam respons umpan tersebut, kita bisa memperoleh data-data seperti judul, deskripsi, tanggal publikasi dan daftar label:

/feeds/posts/summary/196279938761919••••?alt=json

Sehingga kita bisa membuat fungsi untuk menampilkan daftar label pada gawai pos populer seperti ini:

<b:widget id='PopularPosts1' type='PopularPosts'>
  <script>
  //<![CDATA[
  function popularPostsLabels(json) {
      if (json && json.entry && json.entry.category) {
          let out = [];
          json.entry.category.forEach(category => {
              out.push('<a href="/search/label/' + encodeURIComponent(category.term) + '" rel="tag">' + category.term + '</a>');
          });
          out.length && document.write('<p>' + out.join(', ') + '</p>');
      }
  }
  //]]>
  </script>
  <ul>
    <b:loop values='data:posts' var='post'>
      <li>
        …
        …
        <script expr:src='"/feeds/posts/summary/" + data:post.id + "?alt=json&amp;callback=popularPostsLabels"'/>
      </li>
    </b:loop>
  </ul>
</b:widget>

Kode di atas masih menggunakan document.write() sebagai cara yang sudah tidak direkomendasikan lagi karena dapat memicu parsing spekulatif. Untuk menjadikan kode tampak lebih bersih dan aman, atau jika kalian ingin menyimpan skrip pemanggil data label pada berkas JavaScript eksternal, kalian bisa menyimpan ID pos pada atribut HTML, misalnya dengan menyimpannya pada atribut data-post-id seperti ini:

<li expr:data-post-id='data:post.id'>

Kemudian, untuk menampilkan daftar label dapat dilakukan dengan cara seperti ini:

let items = document.querySelectorAll('#PopularPosts1 li[data-post-id]');

items.length && items.forEach(item => {
    let p = document.createElement('p');
    fetch('/feeds/posts/summary/' + item.dataset.postId + '?alt=json')
        .then(response => response.json())
        .then(json => {
            if (json && json.entry && json.entry.category) {
                let out = [];
                json.entry.category.forEach(category => {
                    out.push('<a href="/search/label/' + encodeURIComponent(category.term) + '" rel="tag">' + category.term + '</a>');
                });
                if (out.length) {
                    p.innerHTML = out.join(', ');
                    item.appendChild(p);
                }
            }
        });
});

2 Komentar

Rina

Nanya mas, bisa gak mas di homepage nampilin post untuk label tertentu? Jadi mirip seperti widget recent post by label dan bisa dibatasi jumlah label yang akan ditampilkan pakai max-result . Seperti ini.

<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.name != &quot;LABEL-NAME&quot;'>
        <b:include data='post' name='post' />
    </b:if>
</b:loop>
<b:else/>
<b:include data='post' name='post' />

Komentar telah ditutup.