Membuat Related Item pada Blogger

Related item biasa disebut juga link terkait, fungsinya untuk menampilkan informasi atau artikel lain dalam website kita yang berhubungan dengan artikel yang sedang dibaca pengunjung. Dengan demikian diharapkan pengunjung tidak hanya berhenti pada satu artikel di website kita, namun juga melihat artikel lain yang berkaitan, semakin betah pengunjung berada di website kita semakin baik.

Biasanya link-link ini ditempatkan di bawah artikel, supaya setelah membaca artikel yang dilihatnya terlebih dahulu, pengunjung mencari artikel terkaitnya. 

Secara default, Blogger tidak menyediakan fitur untuk menampilkan related item/artikel terkait dengan yang sedang dibaca pengunjung. Namun kita dapat menambahkan sendiri fitur ini dengan mudah, cukup dengan menambahkan script pada template yang digunakan.

Berikut langkah-langkahnya :

1. Log in ke blogger Anda
2. Pilih menu Template.
3. Klik tombol Edit HTML, jika ada peringatan pilihlah proceed/lanjut.
4. Centang pada pilihan Expand Template Widget
5. Cari kode </head> copy paste script dibawah ini sebelum kode </head> yang anda temukan.

<!--RELATED POST-->

<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/AVvXsEgLWAdlGJWAqRLTnaDKTwt8cFU8HxFln4ernOnSrePkQTo0TRUxi-4bc8r8uG7te5v7oeF2sBm-Qm7jQn6QNWaiC52J9EnPOyUWExoSmTs96TrBC1earhgTu4WcNk6bhRe_d9lPfJHcpcg/") 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'/>

<!--END OF RELATED POST-->

Keterangan :

Bagian teks yang berwarna biru adalah link menuju icon yang nantinya akan berada di sebelah kiri dari tiap judul artikel terkait. Silakan diganti sesuai keingingan, asalkan gambar telah di upload di server.

6. Selanjutnya carilah kode <data:post.body/> jika mungkin terdapat lebih dari satu buah, pilih yang terakhir, atau copy paste kode di bawah ini dibawah semua code <data:post.body/>.

<!--RELATED POST-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
<!--END OF RELATED POST-->

Keterangan :Teks berwarna biru dapat diganti sesuai kebutuhan. Adapun angka 5 menunjukkan jumlah maksimal artikel terkait yang akan ditampilkan.

7. Simpan Template, dan silakan lihat hasilnya.

Semoga bermanfaat.