Membuat Widget Artikel Terkait (Versi 4.0)

Blogger Tune-Up pernah membahas "Membuat Artikel Terkait" hingga 4 versi, yaitu Versi Klasik, Versi 1.0, Versi 2.0, dan Versi 3.0. Tetapi semuanya ditempatkan dibagian bawah artikel dan akan muncul sesuai dengan kategori pada artikel yang sedang kita buka. Sedangkan kali ini kita akan membuat artikel terkait yang ditempatkan pada sidebar, dan sidebar artikel terkait ini akan ditampilkan jika pengunjung membaca artikel saja, tidak akan tampil pada halaman utama. Sebenarnya tips trik kali ini adalah pengembangan dari artikel terkait Versi 1.0. Untuk demonya silahkan lihat pada blog Program Gratisan.

Langkah Integrasi Widget/Gadget Artikel Terkait pada Sidebar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

</head>

Langkah 5
Masukan kode JavaScript dibawah ini diatas kode pada langkah 4:

<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>

Langkah 6
Cari kode dibawah ini:

<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>

Langkah 7
Tambahkan kode dibawah ini:

<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 menjadi seperti dibawah ini:

<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>
<!-- Tambahan Kode-->
<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>
<!--Tambahan Kode-->
</b:loop>
</b:if>

Langkah 8
Simpan template
Langkah 9
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 10
Klik "Tambah Gadget" pada sidebar dengan tipe "HTML/JavaScript"
Langkah 11
Beri judul gadget baru (misal; Artikel Terkait) tersebut dan masukan kode dibawah ini pada konten:

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

Langkah 12
Klik "Simpan" gadget, belum selesai sampai disini...
Langkah 13
Masuk ke "Tata Letak - Edit HTML" dan "Expand Template Widget"
Langkah 14
Cari kode sesuai nama Gadget yang telah kita buat pada langkah 11, sebagai contoh pada langkah 11 adalah "Artikel Terkait", dan tambahkan kode (yang diblok) seperti dibawah ini:

<b:widget id='HTML2' locked='false' title='Artikel Terkait' 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:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Langkah 15
Simpan template

Keterangan:

• Perhatikan Langkah 7 pada kode max-results=10, ubah nilai 10 untuk menentukan jumlah posting yang akan ditampilkan
• Hati-hati pada langkah 14, salah memasukan kode maka akan ada sidebar yang muncul pada saat artikel dibuka saja, dan tidak akan muncul pada halaman utama

Selamat mencoba, semoga berhasil... Happy blogging...:)