Cara Membuat Widget Related Posts Di Blogspot

09 Jan, 2013

Beatdownx - Cara Membuat Widget Related Posts Di Blogspot - Hi, the article you are reading is Cara Membuat Widget Related Posts Di Blogspot,the information that we present as best as possible. Hopefully the contents of the post Article Reading, that we wrote according to what you are looking for, useful and can help you. all right, have a nice reading.

Cara Membuat Widget Related Posts Di Blogspot

Pada tulisan ini akan share tentang tutorial cara membuat related post sebagai widget. Membuat related post dengan widget ini bukan hanya untuk pengguna blog berplatform wordpress saja. Sekarang ini, pengguna blog berplatform Blogspot pun bisa membuat related post tampil di sidebar blogspot, memang jaman sudah canggih sob apa ja bisa dibuat. Tidak Seperti halnya WordPress yang mempunyai Tag dan Category yang bisa digunakan sebagai acuan untuk related post, pada blogspot hal ini menggunakan pemanfaatan dari Label saat kita update posting. Related Post akan menunjukkan/mencari posting mana saja yang dianggapnya mempunyai label sama.

Kebanyakan basa-basinya nech....(hehehe). Mari kita langsung saja bahas tutorial Cara Membuat Related Post Widget di Blogspot

1. Tentunya sobat Login dulu ke akun blogger sobat, kalau tidak login ya tidak bisa jadi dunk tutorialnya...hehehe

2. Klik Rancangan/Layout kemudian sobat masuk ke Edit HTML

Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.

3. Masukkan kode script berikut sesudah tag <head> dan sebelum tag </head> atau diatasnya seperti contah 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>

4. Kemudian sobat cari kode widget 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>

5. Jika sobat sudah ketemu kode diatas, tambahkan kode yang bercetak tebal seperti contoh 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>

Catatan : kode yang berwarna merah adalah jumlah maxsimal postingan atau related posts yang akan ditanyangkan, sobat bisa ganti kode tersebut sesuai pilihan sobat

6. Kemudian Sobat klik Save Template

7. Selanjutnya sobat klik Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post. kemudian copy paste kode di bawah ini pada kotak yang tersedia

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

8. Sekarang sobat kembali lagi ke Layout/Rancangan - Edit HTML, jangan sobat centang/tandai/aktifkan Expand Widget Templates agar bisa mengedit template secara keseluruhan, kemudian cari HTML/Javascript widget Related Post yang kita add. Tambahkan baris yang berwarna merah seperti dibawah ini yang berwana merah sepeti contoh 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>

9. Jika sudah sobat klik Save Template, kemudian sobat lihat hasilnya

Jika sobat berhasil tinggalkan komentar sobat disini. Akhir kata saya mengucapkan selamat mencoba.

Article Cara Membuat Widget Related Posts Di Blogspot

Thats all Article about Cara Membuat Widget Related Posts Di Blogspot for this time, thanks for reading and dont forget to share if this article helps you.