related post

V r.Beta Sebenarnya code tentang related post ini sudah ada dan ramai orang memakainya sejak tahun 2006 lalu, namun pada blog ini saya baru memakainya tiga hari yang lalu ...hiksss.. emang gaptek..

Akan tetapi biarpun terlambat, namun akhirnya aku pakai juga dan hasilnya sukses dan sangat senang sekali, karena blog ini ada penambahan "ehem" =)) , seperti pemilik blog lainnya yang sudah pada jago-jago ngeblog.

Cara kerja Related post sendiri, secara default bekerjanya  hiden alias tersembunyi dalam fronpage ( halaman depan ) blog kita, namun ketika pengunjung menekan salah satu judul pada postingan ( atau read more / pemengalan artikel ) maka  otomatis  Related Post dengan label yang sama akan menampakan dirinya ( hixhixhix hantu kale ).

Kalau masih binggung dengan tulisan saya ini coba tekan judul postingan  atau tulisan read more di bawah ini.

Dan coba lihat di bagian sidebar blog saya ada sebuah elemen baru dengan judul VR RELATIF.

kita pun bisa menaruh elemen Related Post-nya di bawah postingan atau di atasnya. terserah kita dan suka-suka kita untuk menaruhnya.

Install Related Post

Pertama :
buka halaman Template -> Edit Html dan jangan lupa tandai kotak di samping tulisan Expand Template Widget. Kemudian simpan kode di bawah ini sebelum tag </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 < 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>

Kedua :
Setelah memasukan kode di atas, kemudian cari kode di bawah 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>

Jika Susah mencarinya, gunakan pencarian pada browser yang kita pake. untuk FireFox dan Ie tekan berbarengan Tab Ctrl+F.

Setelah ketemu kode di atas ganti dengan kode di bawah 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>

Kemudian tekan tulisan Simpan Template.

Ketiga :
Sekarang masuk ke  Template -> Elemen Halaman, kemudian tambahkan sebuah widget atau elemen Html/JavaSricpt. dan masukan kode di bawah ini.
Namai atau beri judul Related Post.

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

Keempat :
Setelah beres pekerjaan di atas, sekarang kita Kembali buka  Template -> Edit Html dan jangan lupa tandai juga kotak di samping tulisan Expand Template Widget. Kemudian kita cari code widget atau halaman elemen yang kita tambahkan yang di namai Related Post tadi, atau dengan bantuan kotak pencarian cari tulisan Related Post.

dan setelah ketemu kode-nya, kita hanya perlu menambahkan dua baris kode yang saya tandai dengan huruf tebal dan di beri warna.

misalkan kode widget-nya seperti di bawah dan penambahan dua baris kode yang hurufnya di pertebal juga di beri warna.

<b:widget id='HTML13' locked='false' title='Related Posts' 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>

Kemudian Simpan Template.

Pekerjaanya sudah selesai, coba kita periksa apakah berjalan dengan benar dan sesuai.

Note:
Sedangkan untuk jumlah yang akan di perlihatkan oleh RRelated Posts ini.Kita bisa merubahnya sesuai dengan jumlah yang kita inginkan.  kalau kita ingin merubahnya cari saja kode dalam langkah kedua di atas yakni tulisan ini ,  max-results=10. secara default akan tampil sebanyak 10 post, gantilah angkanya sesuai dengan yang kita inginkan.

Perhatian.

Tulisan di atas merupakan hasil terjemahan. Jika merasa kesusahan untuk di mengerti cobalah masuk pada sumber aslinya di blog purplemoggy ini. mudah-mudahan lebih simple dan cepat di pahami.

Sumber dari :

purplemoggy

Technorati tags: Blogs, New Blogger

Page views this post: reader