Menampilkan Artikel Terkait / Related Posts

Artikel Terkait atau Related Posts digunakan untuk memudahkan pembaca menemukan artikel pada "label" yang sama. Silahkan lihat contoh pada akhir postingan dibawah!

Pembaca akan langsung bisa menemukan judul postingan kita yang berkaitan dengan judul posting. Hal ini dilakukan supaya mereka tidak lekas-lekas pergi dari blog kita...



Tahu caranya? Saya akan jelaskan satu-persatu :

1. Pastikan postingan anda telah di beri label, kalau belum faham klik DISINI
2. Dari Dashboard Blogger Anda Buka Tata Letak > Edit HTML.
3. Back up Template Anda sebelum melakukan perubahan apapun!
4. Pastikan Anda memberi tanda centang pada kotak "Expand Template Widget".
5. Cari tag </head>
6. Tambahkan kode berikut persis sebelum tag </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 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_lxzNvmfa6uIta8SGG8vuBGnYrZb1-dSiIBLZtDiqkurvLbPD6zUfGPDcmSkJfti1vNoGsAI5Qg9bFLdXTR8qXotMJRv-qBjKdH1B-bmHQKO9U_R3duQ4II7qZIg-QbYUc8sS-95Uyk/") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
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>');
document.write('<a rel="dofollow" href="http://www.pojokinfo.net/2010/01/menampilkan-artikel-terkait-related.html">Anda Suka ini [?]</a></font>');
}
//]]>

</script>

7. Cari kode <div class='post-body> atau
<!-- end post.body -->, atau <p><data:post.body/></p>  atau <div class='post-footer'> (tergantung tempale yang digunkan) untuk memudahkan gunakan Ctrl+F

8. Copy kode di bawah, dan tempatkan dibawah kode <div class='post-body>
<!-- end post.body -->

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

8. Save, lihat hasilnya...

Enjoy it...