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 1Login ke Blogger
Langkah 2Masuk ke "Tata Letak - Edit HTML"
Langkah 3Checklist "Expand Template Widget"
Langkah 4Cari kode dibawah ini:
</head>
Langkah 5Masukan 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 6Cari 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 7Tambahkan kode dibawah ini:
<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>
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&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
<!--Tambahan Kode-->
</b:loop>
</b:if>
Langkah 8Simpan template
Langkah 9Masuk ke "Tata Letak - Elemen Halaman"
Langkah 10Klik "Tambah Gadget" pada sidebar dengan tipe "HTML/JavaScript"
Langkah 11Beri judul gadget baru (misal; Artikel Terkait) tersebut dan masukan kode dibawah ini pada konten:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Langkah 12Klik "Simpan" gadget, belum selesai sampai disini...
Langkah 13Masuk ke "Tata Letak - Edit HTML" dan "Expand Template Widget"
Langkah 14Cari 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 == "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:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Langkah 15Simpan 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...:)
