Cara Membuat "Artikel Terkait" beserta Labelnya

    Apabila kita membuka dan kemudian membaca artikel yang terdapat pada sebuah blog, maka hampir dapat dipastikan bahwa di bawah setiap artikel yang dibuka dan dibaca tersebut terdapat beberapa tautan dengan berisikan daftar judul artikel yang memiliki keterkaitan kategori atau label dengan artikel yang dimaksud. Dimana model daftar artikel yang ditampilkan pun sangat bervariasi. Mulai dari yang hanya menampilkan daftar tautan, menampilkan daftar link dengan fungsi scroll, menampilkan daftar tautan disertai dengan gambar, dan bahkan dengan menampilkan kombinasi beberapa model tersebut, yang secara umum daftar semacam ini disebut sebagai daftar artikel terkait.

 

     Berbicara mengenai daftar artikel terkait, maka dapat dipastikan bahwa tidaklah terlalu banyak diantara kita yang belum mengenal atau mengetahui tentang teknik serta cara pembuatannya. Karena apabila kita ingin membuat daftar artikel terkait yang akan dimunculkan secara otomatis dalam setiap halaman artikel, maka script beserta langkah-langkah pengerjaannya dapat dengan mudah ditemukan dengan menggunakan bantuan mesin telusur sehingga kita pun dapat dengan mudah memilih model daftar artikel terkait yang dihasilkan oleh script atau kode yang digunakan.

    Lantas untuk apa artikel ini diterbitkan? Salah satu alasan yang mendasari penerbitan artikel tentang cara membuat daftar artikel terkait untuk beberapa label atau kategori yang digunakan dalam blog ini adalah sebagai uraian atas pertanyaan Sobat Blogger dalam dengan judul “Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger” yang menanyakan tentang bagaimana caranya membuat daftar artikel terkait (related post) seperti yang digunakan pada blog ini (seperti yang tampak pada gambar di atas). Disamping itu, maksud lain dari diterbitkannya artikel ini adalah untuk memberikan alternatif pada Blogger lain, sehingga akhirnya terdapat lebih banyak pilihan model atau desain daftar artikel terkait yang dapat digunakan pada blog yang dikelola.

   Dan selanjutnya apabila Anda ingin membuat daftar artikel terkait dengan menggunakan desain atau model seperti yang tampak pada gambar di atas, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, seperti biasa apabila akan melakukan kustomisasi pada template maka terlebih dulu buka menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan rangkaian kode berikut ini tepat di atasnya.

.bingkai-dalam-konten {
  height: auto;
  width: 98%;
  padding: 5px;
  overflow: hidden;
  margin: 5px 0px 5px 0px;
  border: 1px solid #666666;
  color: #424242 !important;
  text-align: justify;
  text-shadow: 0 -1px 0 white;
  text-decoration: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #ffffff;
  background: -moz-linear-gradient( center top, #f3f3f3 30%, #ffffff 70% );
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f3f3f3), color-stop(1, #ffffff) );
}

.area-latar-widget {
  padding: 5px;
  overflow: hidden;
  border: 1px solid #999999;
  background: #ffffff;
  background: -moz-linear-gradient( center top, white 95%, #f3f3f3 100% );
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #fcfcfc) );
}

.daftar-artikel-terkait li {
  text-align: justify;
}

.daftar-artikel-terkait li:last-child {
  list-style: none;
}

Ketiga, cari kode </head> dan kemudian sisipkan rangkaian script berikut ini tepat di atasnya.

<script type='text/javascript'>
//<![CDATA[
function artikelterkini(json) {
var numposts = 5;
  document.write('<ul>');
    for (var i = 0; i < numposts; i++) {
      document.write('<li>');
      var entry = json.feed.entry[i];
      var posttitle = entry.title.$t;
      var posturl;
      if (i == json.feed.entry.length) break;
      for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
      }
      posttitle = posttitle.link(posturl);
      document.write(posttitle);
      document.write('</li>');
    }
  document.write('</ul>');
}
//]]>
</script>

Keterangan:

Jika sebelumnya Anda telah mengimplementasikan teknik kustomisasi template untuk mengubah desain tampilan halaman blog versi seluler dengan mengacu pada artikel yang berjudul “MOBILE TEMPLATE - Customize Blogger Mobile Templates”, “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler” dan atau telah mengimplementasikan pembuatan daftar artikel terkait dengan mengacu pada artikel yang berjudul “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler”, maka Anda dapat melewati langkah yang ketiga ini.

Untuk menentukan banyaknya tautan yang ingin ditampilkan dalam daftar artikel terkait, dapat dilakukan dengan mengubah angka yang terdapat pada kode var numposts = 5;.

Keempat, untuk mempermudah dalam penempatan script, maka cari kode <div class='post-footer'> dan kemudian sisipkan rangkaian script berikut ini tepat di bawahnya.

<!--Artikel Terkait Versi Web Mulai-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.labels'>
    <div class='bingkai-dalam-konten'>
      <h4>
        <b>
          Baca Pula Artikel Terkait Dalam Kategori: 
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
          .
        </b>
      </h4>
      <div class='area-latar-widget'>
        <b:loop values='data:post.labels' var='label'>
          <b:if cond='data:label.isLast != &quot;true&quot;'>
          
          <b:else/>
            <div class='daftar-artikel-terkait'>
              <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=artikelterkini&amp;orderby=published&quot;' type='text/javascript'/>
            </div>      
          </b:if>
        </b:loop>
      </div>
    </div>
  </b:if>
</b:if>
<!--Artikel Terkait Versi Web Selesai-->

Kelima, simpan template.

Sehingga akhirnya terbentuklah sebuah daftar artikel terkait untuk beberapa label atau kategori artikel sekaligus, yang akan dimunculkan secara otomatis dalam setiap artikel (dalam hal ini adalah pada bagian post footer atau di bawah setiap artikel yang diterbitkan). Sedangkan model atau desain tampilan daftar artikel terkait yang dimaksud adalah seperti yang tampak pada gambar di atas. Sehingga apabila warna latar maupun garis yang digunakan belum sesuai dengan desain tampilan halaman blog yang Anda kelola, maka silakan untuk melakukan kustomisasi seperlunya pada kode CSS yang digunakan.

Semoga berguna serta bermanfaat. Dan apabila Anda mengalami kesulitan dalam menerapkan atau mengimplementasikan teknik tersebut, maka silakan poskan komentar untuk menanyakan solusi atas kesulitan yang Anda alami.