Sabtu, 16 April 2011

Cara Membuat Related Post Widget di Blogspot

Petunjuk:
  • Klik “Rancangan” kemudian masuk ke ”Edit HTML
  • Jangan lupa centang “Expand Widget Templatesuntuk bisa mengedit template secara keseluruhan.
  • Masukkan kode skrip 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>
  • 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>
  • Pada Skrip diatas, tambahkan skrip yang dicetak tebal 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>
  • Save template

  • kemudian buka “Rancangan” klik Element dan klik “Tambah Gadget" pilih “HTML/Javascript widget”. Beri judul/title Related Post, kemudian copy paste skrip di bawah ini pada kotak yg disediakan :
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
  • Sekarang kembali lagi ke Rancangan, klik Edit HTML, centang ”Expand Widget Templates”. Kemudian  cari HTML/Javascript widget Related Post yang kita add (tambah). 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>
  • Klik Save dan lihat hasilnya.

0 komentar:

Posting Komentar

UNTUK MEMBUKA BLOG MATA PELAJARAN, SILAKAN KLIK PHOTO GURU YANG MENGAJAR MATA PELAJARAN TERKAIT. SMP YPK TERDEPAN DALAM PRESTASI

TRANSLATE

BACA QUR'AN

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates