Membuat Related Posts atau Artikel Terkait

Untuk mempermudah pembaca dalam berselancar pada blog anda, banyak para blogger2 yang memasang widget yang satu ini ... karena memang banyak sekali manfaatnya. Related Posts Widget biasanya dipasang dan diletakkan pd akhir sebuah postingan dan menampilkan postingan yang lain yang sama / mungkin berbeda kategorinya dengan artikel yang sedang dibuka. Bagaimana ... tertarik untuk membuatnya ?

Saya akan menuliskan langkah2nya secara ringkas :

1. Login di Blogger dengan ID anda.
2. Masuk ke TATA LETAK --> EDIT HTML ( beri tanda centang pada kotak expand widget )
3. Cari kode <data:post.body/>.
4. Copy kode di bawah ini dan letakkan di bawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </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>

5. Setelah itu anda cari kode </head>.
6. Copy kode di bawah ini dan letakkan diatas kode </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 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://technotrixdebajyoti.googlepages.com/RelatedPostsByRealtrix.co.cc.js' type='text/javascript'/>

7. Save
8. Lihat hasilnya

Keterangan :

1. Tulisan yang berwarna merah, bisa anda ganti dengan kata-kata sesuai dengan keinginan anda
2. Angka yang berwarna merah "5" adalah jumlah posting yang ingin kamu tampilkan.

Selamat mencobanya ...