Sunday, December 16, 2012

Membuat Artikel Terkait di Sidebar |

Dulu saya pernah posting wacana Membuat Related Post (Artikel Terkait), pada postingan kali ini artikel terkait tersebut akan kita pasang di sidebar.

Buat Sobat yang ingin memasangnya silakan ikuti tutorial berikut :

Login ke Blogger, Klik Design/Rancangan > Edit HTML.
Beri tanda centang pada Expand Template Widget.

Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
Cari instruksi </head>, kemudian Copy instruksi dibawah ini dan letakkan diatas instruksi </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 < 5) {
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>
Kemudian silakan Sobat cari instruksi menyerupai 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>

Lalu ganti dengan instruksi 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: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>
</b:if>
max-results=5 : jumlah artikel yang akan ditampilkan, silahkan diganti.
Lalu klik Save / Simpan Template.
Selanjutnya, masuk ke Page Element > Add a Gadget > HTML/JavaScript.
Lalu letakkan instruksi dibawah ini kedalam konten HTML/JavaScript.
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Terakhir klik Save, dan lihat hasilnya.

Selamat mencoba dan agar berhasil Membuat Artikel Terkait di Sidebar.