Pada kesempatan ini saya akan share pada anda tercinta tentang tutorial yang sangat bagus untuk kemajuan blog anda dan nantinya akan mendatangkan pengunjung untuk berlama-lama di blog anda. 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>
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'>
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>
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>
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>
<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>
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;
}
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;
}
