Tutorial yang akan saya bahas kali ini yaitu tentang cara membuat artikel terkait / related post di blog, tapi agak berbeda 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.
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 seperti di website kompas.com :
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 seperti di website kompas.com. semoga bermanfaat untuk anda dan selamat mencoba.
Post a Comment