Cara Membuat Related Post (Artikel Terkait) di Sidebar Blog. Pada umumnya, Related Post/Artikel Terkait ini berada dibawah posting. Banyak ragam modifikasi Related Post pada blog. Ada yang membuatnya Related Post dibawah posting dengan fungsi scroll dan ada juga yang membuat Related Post dengan gambar dan bergerak.
Nah, sebelumnya mungkin sobat sudah pernah/sering melihat Related Post pada blog ini. Yup, Related Post pada blog ini ada berada di bagian sidebar blog ini. Hemm.. ini juga mungkin tergantung selera masing-masing yah.. hehe..
Oke, langsung aja tutorialnya Cara Membuat Related Post (Artikel Terkait) di Sidebar Blog. Berikut, langkah-langkahnya...
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. Kemudian, 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 bercetak tebal berikut diantara kode diatas.
<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&callback=related_results_labels& max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
6. Kemudian, klik "Save Template". Tunggu dulu, belum selesai sampai disitu.. Hehe..
7. Kemudian sobat masuk pada halaman "Rancangan" → "Elemen Laman". Lalu klik "Tambah Gadget". Copy pastekan 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. Lalu, sobat kembali lagi ke halaman "Rancangan" → "Edit HTML". Lalu jangan lupa juga klik/centang "Expand Template Widget".
9. Lakukan pencarian pada kata "Related Post". Lalu, sisipkan kode berwarna merah, 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 == "item"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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>
Keterangan :
- Pada kode yang bercetak tebal adalah kode/kata judul widget yang tadi sobat buat.
- Kemudian pada kode yang bercetak Kuning, itu sebenarnya sobat abaikan saja apa bila tidak sama kodenya.. karena itu hanya urutuan widget pada blog saja.
- Nah, pada kode yang berwarna merah, itu sebenarnya kode yang berfungsi agar widget Related Post hanya tampil pada postingan blog saja. (Ya iyalah.. namanya juga Artikel Terkait.. ckckck).
10. Ini, adalah langkah terakhir. Yaitu klik "Save Template". Hehe...
Semoga bermanfaat.
Wassalamu'alaikum Wr. Wb.
