Related Post (Artikel Terkait) di Sidebar Blog

Pernah kebayang tidak kalo related post (artikel terkait) blog sobat ada di sidebar? Apakah sobat pengen seperti itu? Untuk lebih jelasnya sobat bisa lihat pada blog ini. Karena untuk related post (artikel terkait) kebanyakan ada di bawah postingan. Terus, caranya gimana? tenang, caranya tidak ribet dan tidak bikin pusing kepala apalagi sampe 7 keliling. Cuman ada baiknya sobat terlebih dahulu cek kecepatan loading blog sobat

Silahkan sobat lanjutkan bacanya untuk mengetahui caranya:
1. Pertama, yang pasti sobat login terlebih dahulu ke blogger dengan akun sobat.
2. Masuk ke Rancangan/Design >> Edit HTML. Lalu, klik centang pada "Expand Widget Templates".
3. Copy-paste kode dibawah ini, sebelum tag </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;
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>
');
}
//]]>
</script>

4. Silahkan tekan CTRL + F. Untuk melakukan pencarian kode berikut...

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

5. Jika sobat sudah menemukan kode diatas. Lalu tambahkan kode dibawah diantara kode tadi

<b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp; max-results=10"' type='text/javascript'/>
</b:if>

sehingga tampak seperti :

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp; max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

6. Kemudian, klik "Save Template". Eit, tunggu dulu..masih belon selesai....

7. Kemudian sobat masuk pada halaman "Rancangan" >> "Elemen Laman". Lalu klik "Tambah Gadget". Copy paste kode dibawah ini kedalamnya... dan jangan lupa memberikan judul "Related Post", pada widget tersebut. Jika sudah, Lalu klik "Simpan".

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

8. terus, sobat balik lagi ke halaman "Rancangan" >> "Edit HTML". Jangan lupa juga klik/centang "Expand Template Widget".

9. Lakukan pencarian pada kata "Related Post". Lalu, sisipkan kode yang ditandai, Mirip-miripnya seperti kode dibawah ini, milik saya..

<b:widget id='HTML7' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

10. Ini, adalah langkah terakhir. Yaitu klik "Save Template". Tara....silahkan sobat lihat hasilnya

Semoga bermanfaat.