Cara Membuat Artikel terkait atau Related post pada blog

Artikel pada blog harus dipisahkan menurut label atau kategorinya, tujuannya tiada lain adalah untuk memanjakan si pembaca agar bisa memilih artikel sesuai dengan kebutuhannya, misalkan pembaca mencari artikel tentang blogging tutorials, akan lebih menyenangkan bagi pembaca apapila tulisan-tulisan tersebut letaknya sesuai dengan topiknya. Apabila pembaca sudah memilih satu artikel untuk dibaca, akan lebih bagus lagi mereka menemukan artikel-artikel yang terkait dengan topik tulisan tersebut, sehingga tidak perlu lagi kembali ke halaman sebelumnya, nah disini akan dibahas mengenai cara membuat hal tersebut, untuk lebih jelasnya dapat dilihat pada gambar berikut mengenai artikel terkait tersebut :

Langkah-langkah untuk membuat artikel terkait adalah sebagai berikut :

• Masuk (sign up) keblog teman-teman, cari design (rancangan), masuk ke edit html, jangan lupa centang expand widget template agar semua code hlmt keliatan, kemudian cari scrip berikut ini :

]]></b:skin>

agar lebih mudah menemukannya silakan memanfaatkan ctrl F

• Masukkan scrip dibawah ini persis di bawah code tersebut.

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

• Cari bagian di bawah ini, tambahkan bagian yang berwarna merah

<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>
<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>
</b:loop>
</b:if>
</span>

• Cari code baris post footer berikut ini :

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

• Masukkan scrip berikut di bawahnya :

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

• Selanjutnya save template (simpan perubahan)

• Teman-teman bisa menambah gaya tampilannya dengan cara menambahkan pada halaman cssnya, tambahkan code di bawah ini sebelum code :  ]]></b:skin>

.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: ukuran font;
color: #nilai warna;
}

.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: #nilai warna}
.related-posts li a:hover{color: #nilai warna; text-decoration:none;}

Pilih ukuran fontm, misal : 15px
Pilih nilai warna, misal : #3366FF