Thursday, March 29, 2012

Membuat Related Post pada Blogger

Cokhik- pada tips dan trik ini penulis akan bahas bagai mana membuat Related Post pada blog, karena saya dulu juga bingung saat mau buat Related Post. Pada walanya sebelum ganti tamplate saya menggunakan cara ini, tetapi setelah template saya rusak saya cari tamplate baru zoomtemplate dan ternyata udah ada Related Post langgsung. Oke gak usah banyak basa basi langsung act aja!

1. Login ke blog anda lalu template (jangan lupa di Expand Widget Templates)
Masukkan kode script berikut sesudah tag <head> dan sebelum tag </head> seperti dibawah ini:

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


2. Kemudian cari kode widget 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>
</b:loop>
</b:if>


3. Pada Script diatas, tambahkan script yang dicetak merah 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>
<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>


4. Save template
5. kemudian buka Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post. kemudian copy paste script di bawah ini pada kotak yg disediakan :

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


6. Sekarang kembali lagi ke Template -> Edit HTML, centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan, kemudian  cari HTML/Javascript widget Related Post yang kita add. Tambahkan baris yang berwarna merah seperti dibawah ini :

<b:widget id='HTML13' 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>

Semoga Sukses!!!

No comments:

Post a Comment