cara membuat artikel terkait ( Related Posts )

 Artikel terkait yang muncul di bawah postingan sangat penting, karena akan memudahkan pengunjung untuk langsung mengklik artikel-artikel yang masih berhubungan atau ada hubungannya dengan artikel sebelumnya tanpa susah-susah melihat daftar isi maupun artikel-artikel yang sengaja di munculkan di sidebar blog / website.

Keuntungan kita jika kita memasang Artikel terkait di blog, peblog, pengunjung pasti akan lama berada di blog kita, karena mereka merasa senang, yang mereka cari sudah tersedia dengan jelas tinggal nge-klik satu per satu, dan efek nya dapat meningkatkan kualitas blog kita di mata google.

Perhatian :

yang perlu anda ketahui dan anda ingat, bahwa artikel terkait ini cara kerjanya adalah memunculkan artikel-artikel yang label artikel atau label postingannya sama.

ikuti langkah-langkah di bawah ini untuk membuatnya :

1. login dulu ke blog anda jika belum masuk
2. klik layout , klik edit HTML
3. kemudian centang pada tanda " Expand Template Widget "
4. copy script di bawah ini dan paste di bawah kode/tag ]]></b:skin>

<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>

5. cari script seperti di bawah ini

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <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>

6. tambahkan script berikut ini tepat setelah script di atas

<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=10&quot;' type='text/javascript'/>
</b:if>

7. selanjutnya cari script seperti di bawah ini

<div class='post-footer-line post-footer-line-3'>

 8. letakkan script berikut ini tepat di bawah script tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts'>
<h4>Posts Terkait:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

9. klik SIMPAN TEMPLATE, selesai.....

jika ingin memodifikasi, ikuti langkah-langkahnya berikut ini

=> copy script di bawah ini dan letakkan persis atau sebelum kode/tag ]]></b:skin>

.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: 24px;
color: #000000;

.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}
.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: ukuran font;}
.related-posts li a{color: #0000FF}
.related-posts li a:hover{color: #0000FF; text-decoration:none;}

keterangan :
warna hijau adalah ukuran untuk title ( Posts Terkait )
warna merah adalah warna title ( Posts Terkait )
warna biru adalah warna untuk nama artikel-artikel yang terkait...


selamat mencoba, semoga berhasil.
jika ada masalah silahkan bertanya melalui kotak komentar...