Cara Menampilkan Artikel Terkait di Posting Blogger/Blogspot

Penasaran bagaimana cara menampilkan daftar link terkait di akhir posting pada Blogspot Anda? Meskipun Blogger / Blogspot tidak menyediakan widget atau fasilitas khusus untuk membuat atau menambahkannya, Anda bisa membuat sendiri daftar link yang biasanya diberi judul Artikel Terkait atau Related Links itu.

Prinsip kerjanya, daftar link artikel terkait akan ditampilkan berdasarkan label atau tag posting tulisan Anda. Hal ini akan membuat pengunjung lebih betah dan merasa diberi kemudahan karena bisa menelusuri tema atau topik sejenis dengan yang posting yang sedang dibacanya.



Tampilan Link Artikel/Posting Terkait

 Ada banyak cara untuk membuatnya. Berikut ini salah satu cara paling praktis:

1. Buka Layout / Template > Edit HTML di Dashboard Blogger Anda. Kode HTML penyusun template blog Anda akan ditampilkan.
2. Pastikan Anda centang kotak Expand Widget Templates.
3. Sebelum mengutak-atik, sebaiknya salin seluruh kode dan simpan dalam file tersendiri di komputer Anda sebagai cadangan. Tujuannya agar Anda bisa meng-copy paste template awal tersebut ke blog Anda jika ternyata nanti terjadi masalah saat menerapkan hasil utak-atik kode.
4. Mari kita mulai, cari tag </head>. Biar cepat, gunakan fitur pencarian teks, tekan Ctrl + F, ketikkan </head> dan cari.
5. Setelah ketemu, tambahkan kode berikut dan letakkan persis sebelum tag </head>.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCG5rtE0QRCiVnH74mVz7DSfx6lMh-9MIBVAeY0Q2lJniw9WeBOtMkne6jb6BbSI9Da5qBtTH_34Qxvvvt8870OrublkA2Z5uGQ3t5pkIY6xdsQgXWgnGB0NkWxAjnqJhxwUIg-kKUMdc/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js' type='text/javascript'/>
6. Kemudian cari <data:post.body/>, biasanya ada 2 buah. Jika tidak ketemu, Anda bisa mencoba mencari <div class='post-body>.
7. Jika sudah ketemu, tempatkan kode berikut persis di bawahnya (jika bingung menentukan yang mana, tempatkan saja kodenya di bawah semua <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Artikel Terkait : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
8. Kode di atas akan menghasilkan maksimal 5 link artikel terkait. Jika Anda ingin mengubah jumlah link yang akan ditampilkan, ganti angka di max-results=5 dengan jumlah yang Anda inginkan.
9. Simpan perubahan template, selesai. Silakan periksa hasilnya.