Membuat Related Post

Daftar Related post atau artikel yang berhubungan tersebut akan tampil di bawah setiap postingan yang kita buat. Daftar Related Post tersebut berisi postingan yang ber”label” atau mempunyai kategori yang sama dengan postingan yang kita buat tersebut.
Perlunya memasang Related Post (Postingan Yang Terkait)

Dengan memasang Related Post tersebut para pengunjung akan mengetahui postingan-postingan lainnya (artikel yang pernah kita posting sebelumnya) yang mungkin berhubungan dengan postingan yang sedang dibaca oleh pengunjung tersebut. Dengan demikian secara tidak langsung akan dapat “mempromosikan” postingan-postingan kita yang lainnya dan hal ini akan berakibat baik terhadap jumlah pengunjung dan pada akhirnya akan dapat meningkatkan traffic blog kita.

Cara Membuat Related Post Pada Blog

Langsung saja, langkah-langkahnya adalah sebagai berikut.
1. Login ke account http://blogger.com/ hingga masuk Dasbor >> Tata Letak >> Edit HTML
2. Jangan lupa untuk membackup template untuk mengantisipasi hal-hal yang tidak kita inginkan.
3. Centangi “Expand Widget Template”
4. Cari dan temukan kode(supaya lebih mudah gunakan ctrl+F)(biasakan untuk memback up template anda)

</head>

5. Tempatkan kode berikut ini sebelum kode diatas.

<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://www.dogphilosophy.net/graphics/sample1.jpg") 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 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>

7. Cari kode di bawah ini

<p><data:post.body/></p>

8. Copy kode dibawah ini dan letakan sesudah kode diatas.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Related Posts on <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=10&quot;' type='text/javascript'/></b:if></b:loop> </h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

NB: Ganti tulisan yang berwarna merah dengan tulisan yang anda inginkan

Keenam, lakukan Simpan Template.

Ketujuh, selesai

Selamat Mencoba!!