Membuat recent post di Blogger (2)

Saat menyusun tema blog, pasti kamu ingin menampilkan rekomendasi post di tiap artikel supaya views blog jadi tambah banyak. Makin banyak link post yang ditampilkan, maka peluang dapat views makin besar. Namun bagaimana caranya?

Di artikel kali ini, BENN/YES ingin membagikan salah satu cara untuk menampilkan recent post menggunakan javascript murni. Sumber datanya adalah API feed JSON milik Blogger.

Sebelumnya, BENN/YES pernah membagikan cara lainnya untuk membuat recent post di Blogger. Mari mampir juga di sini: https://www.bennyes.my.id/2021/06/recent-post-blogger-otomatis.html

Cara membuat recent post

Ini adalah cara untuk membuat recent post dengan layout seperti di bawah ini:

1. Masuk ke edit HTML

Setelah login ke Blogger dengan akun Google, pilih Tema, lalu klik panah di samping tombol sesuaikan/customize, lalu klik Edit HTML.

2. Tambahkan kode

Tambahkan kode javascript berikut ke bagian head.

          <script>
          //<![CDATA[
            // Nama-nama bulan
            var month_string = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];

            // Nama fungsi boleh bebas
            function sidebarwriter (blogdata) {
              var recent = document.createElement('div');
              recent.classList.add('recent');
              // memasukkan element di sekitar script:
              document.currentScript.insertAdjacentElement('afterend', recent);
              // Mendapatkan daftar post:
              var gw = blogdata.feed.entry;
              var postlist, entrythumb, imgthumb, thumbsrc, entryhref, entrytitle, entryprop, postdate, dateicon, datetime, fulldate, date, month, year;

              for (var ww = 0; ww < gw.length; ww++){
                postlist = document.createElement('div');
                postlist.classList.add('postlist');
                recent.appendChild(postlist);
                entryhref = document.createElement('a');
                entryhref.class = 'postlistarea';
                entryhref.title = `Baca: ${blogdata.feed.entry[ww].title.$t}`;
                entryhref.href = blogdata.feed.entry[ww].link[4].href;
                postlist.appendChild(entryhref);
                // entrythumb: thumbnail post
                entrythumb = document.createElement('img');
                entrythumb.classList.add('postthumb');
                thumbsrc = blogdata.feed.entry[ww].media$thumbnail.url;
                if (thumbsrc) {
                 // Untuk menampilkan thumbnail dengan rasio seperti aslinya. Hapus jika menginginkan thumbnail dengan ukuran 72px * 72px (rasio 1:1)
                  if (thumbsrc.includes('s72-c')) {
                    // link thumbnail yang mengandung "s72-c" adalah link gambar thumb dengan ukuran 72px x 72px
                    thumbsrc = thumbsrc.replace(/s72-c/gi, 'w96-h54-c');
                    // mengganti "s72-c" dalam link dengan w (lebar) 96px dan h (tinggi) 54px
                  }
                }
                else if (!thumbsrc) {// Thumb placeholder jika post tidak memiliki thumbnail. ganti else if menjadi if jika menggunakan script if di atas
                  thumbsrc = "https://raw.githubusercontent.com/benblogging/gudang/main/pictures/2021/06/no-img-2a.png"; // bisa diganti dengan gambar keterangan "no image" sendiri
                }
                entrythumb.src = thumbsrc;
                entrythumb.alt = `Thumbnail for "${blogdata.feed.entry[ww].title.$t}"`;
                entryhref.appendChild(entrythumb);
                // entryprop: cover untuk judul artikel dan tanggal post
                entryprop = document.createElement('span');
                entryprop.classList.add('entryprop');
                entryhref.appendChild(entryprop);
                // entrytitle: judul artikel
                entrytitle = document.createElement('span');
                entrytitle.classList.add('entrytitle');
                entrytitle.innerHTML = blogdata.feed.entry[ww].title.$t;
                entryprop.appendChild(entrytitle);
                postdate = document.createElement('span');
                postdate.classList.add('post-date');
                entryprop.appendChild(postdate);
                // dateicon: ikon kalender, yang melambangkan tanggal post. src-nya bisa diganti
                dateicon = document.createElement('img');
                dateicon.classList.add('small-icon');
                dateicon.alt = 'post date';
                dateicon.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgswCVJhrkqoea9mhXFm4DR-t4zQltHeZK80n-FZMuudYHrAHaX_qgs8ysJB2ePkddDz8hPfSQaf5Gvb9Ghknwno54093IdnpBzhLxA-rumCrU0PpfcvfYaDCD00j1e_poc-CqCgPTHdcsY/s0/g6.png';
                postdate.appendChild(dateicon);
                // datetime: tanggal post
                datetime = document.createElement('time');
                datetime.dateTime = blogdata.feed.entry[ww].published.$t; //set atribut datetime di tag HTML
                fulldate = new Date(blogdata.feed.entry[ww].published.$t); // Mengubah bentuk string di data JSON menjadi bentuk tanggal
                date = fulldate.getDate(); // tanggal post
                month = month_string[fulldate.getMonth()]; // bulan post, langsung nama bulannya
                year=fulldate.getFullYear(); // tahun post
                datetime.innerHTML =`${date} ${month} ${year}`;
                postdate.appendChild(datetime);
              }
              }
          //]]>
          </script>
        

Fungsi di atas menggunakan document.currentScript yang menurut Mozilla tidak didukung di Internet Explorer. Apabila ingin script ini berjalan di Internet Explorer, maka gunakan document.getElementById kemudian appendChild div.recent ke elemen ID tersebut.

Kemudian tambahkan kode CSS berikut

        <style>
          .postlist {
            margin-bottom: 1em;
          }
          .postlist a {
            display: flex;
            align-items: center;
            color: navy; /* SESUAIKAN DENGAN TEMA BLOG */
          }
          h3.title {
            margin-bottom: 16px;
          }

          .entryprop {
            margin-left: 1em;
            display: flex;
            flex-direction: column;
          }
          .entrytitle {
            font-family: sans-serif; /* BEBAS */
            line-height: 1.2;
            font-size: 15px;
            font-weight: bold;
          }
          .postthumb {
            width: 100px;
          }
          .small-icon {
            width: 12px;
          }
          .post-date {
            font-size: 13px;

            color: #444; /* BEBAS */
            display: flex;
            align-items: center;
            margin-top: 4px;
            font-family: serif; /* BEBAS */
          }
          .post-date time {
            margin-left: 5px;
          }
        </style>
   

Tambahkan script ini di bagian sidebar, atau bagian lain yang kalian inginkan. Bisa lewat Edit HTML, bisa juga dengan menambahkan gadget lewat tab tata letak (layout).

<script src="/feeds/posts/summary?&amp;alt=json-in-script&amp;callback=sidebarwriter"></script>

Apabila ingin menambahkan recent post dalam label tertentu, gunakan script ini, ganti "LABEL" dengan label yang diinginkan:

<script src="/feeds/posts/default/-/LABEL?alt=json-in-script&amp;callback=sidebarwriter"></script>

Setelah script di atas dijalankan, script akan langsung memanggil fungsi (callback) sidebarwriter(blogdata) yang sudah dijabarkan di kode paling atas. Nama 'sidebarwriter' ini bisa diganti, yang penting nama di script dan di fungsi sama.

Tips

1. Untuk memperkecil ukuran script fungsi, hilangkan spasi, kecuali saat deklarasi variabel (var, let, const) dan bagian lain yang membutuhkan spasi.
2. Cara lain untuk memperkecil ukuran script fungsi adalah dengan mengganti nama variabel dengan yang lebih singkat namun jelas maknanya, misalnya untuk array month_string, bisa diganti dengan monthstr. Atau cukup satu karakter: a, bila kamu dapat mengerti makna kodenya.
3. Kode CSS di atas hanya kode dasar yang mengatur penempatan setiap element. Untuk warna dan latar belakang bisa ditentukan sendiri sesuai selera.

Sumber informasi