Related Post Di Bawah Postingan

Mendengar perkataan "Related Post" saya yakin para sahabat blogger sudah tahu maksudnya. Karena pada postingan yang terdahulu zona-klik pernah juga mempublish postingan tentang cara memasang related post atau artikel terkait disetiap postingan yang bisa dilihat disini. Tetapi masih banyak juga yang memiliki blog dan tidak membuat related post pada postingnya. Hal ini tentu saja akan merugikan blog itu sendiri, mengapa saya katakan demikian ?? Karena dengan adanya related post atau artikel terkait di setiap postingan, tentu saja ini akan memberikan backlink kepada posting yang lama dan visitor bisa mengunjungi postingan tersebut walaupun sudah lama dipublish.

Sesuai dengan judul posting kali ini "Related Post Dibawah Postingan (Bagian 2)" mengapa zona-klik membuat "Bagian 2" karena sebelumnya telah dibahas juga cara membuat related post dan kali ini zona-klik menemukan tutorial baru dari blognya "pak guru" untuk memasang related post yang bisa dilihat hasilnya pada akhir postingan ini. Zona-klik merasa related post kali ini lebih bagus dari yang sebelumnya serta zona-klik juga ingin sharing kepada blogger lainnya jika ingin membuat related post yang sama seperti pada zona-klik. Untuk memasang related post ini coba di ikuti langkah-langkah berikut :

1. Login account blogger dengan username dan pasword pribadi.

2. Klik Tata Letak --> Pilih Edit Html --> cari kode </head> 

3. Copy kode dibawah ini dan letakkan persis diatas kode (</head>) tersebut.

<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>
4. Cari kode berikut :

<p><data:post.body/></p>
5. Copy kode dibawah ini dan letakkan dibawah 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>

Ket : Tulisan berwarna merah "Related Post" itu bisa diganti sesuai dengan keinginan.

6. Simpan Template.

Itulah langkah-langkah untuk membuat related post dibawah postingan, jika telah mengikuti langkah-langkah tersebut dengan benar coba lihat hasilnya pada blog.