Cara buat Related Posts menampilkan posting yang berkaitan

Related Posts adalah widget untuk menampilkan posting yang berkaitan dengan postingan yang tampil.

Keuntungan dengan pemasangan widget ini artikel yang berhubungan berkaitan tentu saja akan mempermudah pengunjung blog kita untuk menemukan artikel terkait tanpa harus menuju dan membuka satu persatu halaman dalam link label.

Cara Pemasangan Di Blogger:
Masuk pada Template -> Edit HTML -> kemudian masukan kode javascript dibawah ini diatas kode [/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>

Selanjutnya:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari 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>

Jika sudah ketemu, masukan kode berwarna hijau dibawah diantara kode diatas.

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

Pada proses ini pengeditan pada kode HTML sudah selesai, Jangan lupa disimpan.

Selanjutnya:

Masuk pada Template -> Elemen halaman -> kemudian buat elemet baru atau klik "Tambahkan sebuah Elemen Halaman" -> copy-paste kode dibawah ini dan jangan lupa memberikan nama judul misal, "Artikel yang berhubungan" -> kemudian jangan lupa disimpan.

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

Selanjutnya:

Agar related post ini tidak tampil pada halaman utama dan hanya tampil pada halaman posting tunggal maka kita perlu penambahan beberapa kode, caranya:
Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini, sebisanya cari sesuai dengan title yang kita masukan, sebagai contoh, tadi saya memberi mana dengan Artikel yang berhubungan, jika sudah ditemukan masukan ke dua kode berwarna merah dibawah.
Catatan: dibawah ini ada kode HTML13 ini jangan dijadikan patokan pencarian, sebaiknya abaikan saja karena setiap elemen pasti berbeda-beda, cukup cari title saja.
<b:widget id='HTML13' locked='false' title='Artikel yang berhubungan' 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>



Selamat mencoba, Happy Blogging :)







Artikel ini bermanfaat? silahkan gunakan tombol dibawah ini untuk mengirimkan artikel ke seluruh teman-teman anda di facebook.twitter.technoratti.myblogblog.dan lain-lain.Karena sharing is caring berbagi merupakan bentuk kepedulian kita terhadap teman agar apa yang kita ketahui bisa diketahui juga oleh teman kita lainnya. Bookmark and Share

2 komentar:

Darma Saputra mengatakan...
Halloo...
Terimakasih Mas atas infonya sangat bermanfaat sekali, dan salam buat semua teman-teman Blogger, Jangan lupa, kalau ada waktu jalan-jalan sebentar ke blog Bujang Riau http://www.darma-saputra.co.cc. Sharing dan berbagi Tips, Trik, Cara dan Petunjuk Ampuh tentang Berbagai Rahasia Hacker, Software Hacker, Windows XP, Microsoft Office, Hack Facebook, Email, Download, Berita, Gosip, artikel, Kesehatan
terimakasih ...
Ramdhan mengatakan...
Sip

Posting Komentar

Sesingkat Apapun komentar Anda.Sekejam apapun kritikan anda.Sepedas apapun kata-kata Anda.Semanis apapun pujian Anda selama itu masih berhubungan dengan topik yang ada di halaman posting ini maka Saya sangat menghargai apa yang anda utarakan dan akan menjalin hubungan pertemanan yang baik antar sesama pemilik blog.Anda berkomentar,saya berkunjung ke blog anda untuk segera memulai hubungan pertemanan yang baik.Terima kasih Teman.