Pada topik cara memasang related post /
artikel terkait pada blogger yang saya sajikan untuk anda yaitu
related
post berada di dalam artikel blog.
Nah tentunya dengan penampilan yang
bisa dikatakan baru ini, akan mudah dilihat oleh pengunjung untuk
mencari artikel yang akan mereka cari / dibaca.
Di samping Contoh
tampilan Related Post / artikel terkait di lokasi postingan.
Berikut langkah-langkah
Cara Membuat Artikel Terkait
1. Masuk ke Dasboard
2. Pada menu Design => Edit Html
3. Backup dulu template anda => centeng Expand widget template
4. Cari kode </head> dan letakkan kode script dibawah ini di atas kode </head>
<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;
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++;
}
}
//]]>
</script>5. Kemudian cari kode <div class='entry entry-content'>
6. Lalu copy kode di bawah ini dan letakkan di bawah kode <div class='entry entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;'>
<div class='related-posts'>
<p>TERKAIT :</p>
<ol>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name
+
"?alt=json-in-script&callback=related_results_labels&max-results=5"'
type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</ol>
</div>
</div>
</b:if>
7. Selesai, simpan template anda
Nah
sekarang anda sudah punya Related post / artikel terkait pada
blog anda, tapi untuk tampil lebih keren dan lebih menarik, saya akan
beri tambahan sedikit sentuhan kode css,caranya yaitu :
- Cari kode ]]></b:skin>
- Lalu copy kode dibawah ini dan letakkan sebelum kode ]]></b:skin>
.related-posts {
border:1px solid #ddd;
background:#D8DFEA;
font-weight:bold;
width: 80%;
float:right;
}
.related-posts p {
margin:5px 10px 5px;
}
.related-posts ol {
font-weight:normal;
margin:0 0 0 25px;
}
.related-posts li {
margin-bottom: 2px;
}
Begitulah Tips
Cara Membuat Artikel Terkait semoga bermanfaat untuk anda dan selamat mencoba.