Memasang Artikel Terkait Blogger Versi 4.0 (Related Posts Blogger v4.0)

Ada lebih dari satu versi related posts blogger atau artikel terkait blogger yang ada saat ini. Masing-masing memiliki fungsi tersendiri, jika ingin menampilkan artikel terkait di bawah artikel yang berupa link saja (tanpa ada gambar kecil), Anda bisa memakai artikel terkait versi classic, versi 1.0 dll.

Blogger

Sementara jika Anda ingin menampilkan artikel terkait di bawah posting dengan hiasan berupa gambar kecil atau thumbnail, Anda bisa menggunakan artikel terkait versi 3.0. Kemudian jika ingin menampilkan artikel terkait dengan kombinasi gambar kecil (thumbnail) yang disertai ringkasan artikel, Anda bisa mengikuti tutorialnya di sini.

Versi widget artikel terkait di atas kesemuanya memiliki satu kesamaan, yaitu penempatan widget yang ada di bawah postingan artikel. Mungkinkah widget artikel terkait blogger bisa ditempatkan selain di bawah postingan artikel? Jawabannya, bisa. Setelah belajar dan memahami artikel dari sang maestro blogger mas Hendriono, selaku pengelola blog modification-blog.blogspot.com, widget artikel terkait blogger bisa ditempatkan di sidebar blog. Anda tertarik? Berikut tutorialnya.

Installasi Artikel Terkait Blogger Versi 4.0

1. Log in ke Blogger » "Template" » Backup template (direkomendasikan)

Backup Template Blogger

2. Klik "Edit HTML" » cari kode berikut (CTRL+F)

</head>

3. Copy kode JavaScript berikut kemudian letakkan di atas kode pada langkah No. 2

<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. Cari kode berikut

<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. Tambahkan potongan kode HTML berikut tepat di atas kode yang dihighlight atau disorot (baris kode no.5) pada langkah no.4

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

Sehingga susunan kodenya menjadi seperti berikut

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

Keterangan:
nilai 10 pada baris kode no.6 menentukan jumlah artikel terkait yang ditampilkan pada widget, Anda bisa merubahnya sesuai dengan keinginan Anda

6. Simpan pengaturan template

7. Masuk ke menu "Tata Letak" » "Tambahkan Gadget" pada sidebar » "HTML/JavaScript"

Tambahkan gadget HTML/JavaScript

8. Copy kemudian tempel potongan kode berikut dan beri judul gadget misalnya "Artikel Terkait"

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

9. Klik "Simpan" gadget

Configurasi HTML/JavaScript

10. Masuk ke menu "Template" » "Edit HTML"

Edit HTML Blogger

11. Cari nama judul gadget yang telah kita buat pada langkan no.8, misalnya "Artikel Terkait", kemudian sisipkan potongan kode yang diblok berikut ini (baris kode no.3 dan no 11).

<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

12. Simpan Template

Selamat mencoba, semoga berhasil

sumber: http://modification-blog.blogspot.com/2009/11/membuat-widget-artikel-terkait-versi-40.html

Tweet

Postingan terkait:

Ditulis EM — Wednesday, 17 April 2013 — Add Comment — Blogger, Blogger Widgets