Membuat Related Post

Sunday, June 6, 2010
Related post bermanfaat untuk menarik pengunjung membaca artikel-artikel lain yang memiliki kaitan dengan artikel yang ditampilkan.
Berikut ini adalah langkah-langkah untuk membuatnya :

Untuk membuat Related Post dibutuhkan beberapa langkah berikut:

Langkah Pertama

1. Log in --> Click Layouts --> Click EDIT HTML dan cari kode di ini </head>

2. Copy kode di bawah ini dan letakan di atas 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>


3. Save Template

Langkah Kedua

1. Klik Edit HTML lagi dan beri centang pada Expand Widget Template.

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


3. Masukan kode ber-highlight kuning berikut diantara kode-kode di atas. Lihat di bawah ini untuk mengetahui tempat meletakkannya..


<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

Langkah ketiga

1. Di dashboard menu --> Klik Layouts --> Add A Gadget dan pilih HTML/Javascript

2. Copy kode di bawah ini dan masukan di kotak yang tersedia


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


3. Beri Judul, misalnya Related Post atau Post yang berkaitan atau sejenisnya.

4. Jangan lupa Simpan

Langkah ke empat
Agar Related Post muncul di halaman utama dari blog tapi muncul di halaman postingan atau single page, kita harus menambahkan beberapa kode.

1. Cari kode di bawah ini. Fokus saja pada tulisan Related Post atau Post yang berkaitan (tergantung dari judul yang kalian buat di step 3 pada langkah ke 3)


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



2. "Kode ber-highlight kuning" diatas adalah kode yang harus di tambahkan.

3. Save template dan Sekarang lihat hasilnya. Klik disini untuk melihat contohnya.

Thanks To Kang O-OM for the hacks

Jika ada yang kurang jelas, silakan disampaikan.
Terima kasih..
semoga bemanfaat..

Source : Blog Pak Guru

Comments :

4 komentar ke "Membuat Related Post"

dion on May 9, 2011 at 8:22 PM said...

udah di pasang gan and dah bener,tapi koq related postnya nggak muncul ya di blog ane???tlong bantuannya gan??
apa harus di tambah href:http://indeks-data.blogspot.com dalam kode yg agan kasih??

www.indeks-data.co.cc

Ari on May 20, 2011 at 10:11 PM said...

boleh lihat kode template Anda yang sudah dipasangi kode diatas?
bagian html-nya saja cukup.

The Notees Web on September 17, 2011 at 5:53 PM said...

Mungkin tidak ada label yang sama.

The Notes Web on September 30, 2011 at 12:36 PM said...

Sudah saya perbarui agam-agan sekalian. Silakan diperiksa seandainya dalam tutorialnya masih ada yang eror.
Terima kasih!


Post a Comment

Silakan berkomentar sesuka Anda. Namun jangan spam, berbau SARA, kekerasan, porno atau intimidasi terhadap orang lain. Komentar yang melewati batas akan di hapus. Terima kasih.

Get Update

Masukkan alamat e-mail Anda pada kotak di bawah ini untuk mendapatkan update terbaru dan berlangganan catatan dari blog "The Notes Web" via e-mail :


Privacy guaranteed, we will never share your e-mail.

Komentar terbaru

Catatan Terbaru

Komentar Terbaru