Cara Membuat Artikel Terkait di Blog Tanpa Gambar

Salah satu hal yang diperlukan pengunjung saat membaca suatu artikel di blog kita adalah navigasi / kemudahan menemukan artikel terkait lainnya. Oleh karena itu, dibutuhkan sebuah gadget atau widget yang bernama Related Posts. Bagaimana cara membuatnya, mari ikuti panduan kali ini !

Postingan sebelumnya, memang membahas hal serupa yaitu Cara Membuat Related Posts dengan Gambar Thumbnail. Perbedaannya adalah pada artikel tersebut fungsi artikel terkait dijadikan dengan gambar artikel sedangkan postingan ini hasilnya akan menampilkan beberapa judul artikel yang memang mempunyai hubungan keterkaitan berdasarkan label.

Artikel terkait pada umumnya diletakkan pada bagian bawah posting suatu artikel. Hal ini akan mempermudah pengunjung yang ingin membaca artikel selanjutnya lengkap sesuai dengan kategori label yang sama. Artikel yang muncul sesuai dengan postingan terbaru dari masing-masing label itu. Contohnya dibawah ini :

Artikel terkait tersebut, terbentuk dari susunan label Gadget and Widget. Cara membuatnya, mari simak panduan berikut :
1. Login ke Blogger untuk membuka blog anda.
2. Buka Menu 'Template'
3. Lalu klik 'Edit Html' (Anda bisa menekan tombol CTRL+Z untuk kembali, meskipun template telah disave. Dan Sebelum mulai, harap backup template yang digunakan agar dapat di restore kembali jika ada masalah dalam pemasangan).
4. Cari kode berikut : </head> (Pakai Ctrl+F untuk mempermudah)
5. Copy Paste kode di bawah ini tepat di atas </head>

    <script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;}}}}
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];}}
    relatedTitles = tmp2;
    relatedUrls = tmp;}
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;}
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' +
    relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;}
    i++;}
    document.write('</ul>');}
    //]]>
    </script>

6. Cari kode berikut : <data:post.body/> (Pakai Ctrl+F untuk mempermudah)
7. Copy Paste kode dibawah ini kemudian letakkan di bawah <data:post.body/>
Catatan : Biasanya terdapat 2 buah <data:post.body/> Pakai kode yang kedua lalu paste di bawahnya ya.

    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <h4>Artikel Terkait</h4>
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </b:if>

8. Klik Save.

Cara kerja Related Posting ini cukup mudah singkat, merujuk pada label yang diterapkan pada postingan. Artikel yang memiliki label yang sama akan tercantum secara otomatis pada Artikel yang sedang dibuka.

Keterangan :
Jika artikel terkait muncul juga di halaman utama (homepage) blog anda, tambahkan kode ini diatasnya ( Langkah 7) :
<b:if cond='data:blog.pageType == "item"'>
dan berikan kode </b:if> pada paling akhir.

Angka berwarna merah menunjukkan jumlah artikel yang akan ditampilkan.
Demikian cara membuat artikel terkait di blog tanpa gambar yaitu hanya link text beserta judul artikel saja.