Tutorial yang
akan saya bahas yaitu tentang membuat artikel terkait / related post di
blog. Tapi pada tutorial tersebut agak berbeda pada dari yang lain.
Related post / artikel terkait yang biasa dipakai oleh blogger atau
dijumpai pada blog-blog orang lain, biasanya ditempatkan di bawah
posting atau pada sidebar.
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
mempermudah dilihat oleh pengunjung untuk mencari artikel yang akan
mereka cari / dibaca. Di bawah ini contoh tampilan Related Post /
artikel terkait di lokasi postingan. Nah, saya mulai sekarang cara
membuatnya :
Berikut langkah-langkah
cara bikin related post di dalam artikel blogspot :
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>Related posts:</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;
}
