Cara Mudah Membuat Artikel Terkait Pada Sidebar

Cara Mudah Membuat Artikel Terkait Pada Sidebar – sekarang saatnya kembali ke tutorial blog, sekarang pada postingan kali ini membahas tentang artikel terkait/related post yang diletakkan pada sidebar.

Bagi semua blogger yang bilang tentang kenyamanan visitor berkunjung di blog kita, pasti cara ini salah satu kuncinya, yaitu artikel terkait/related post, namun yang satu ini menampilkannya pada sidebar, yang biasanya berada di bawah postingan.

Tidak lama-lama lagi langsung saja kita coba Cara Mudah Membuat Artikel Terkait Pada Sidebar, yaitu:

Langkah 1:

1. Jangan lupa Login dulu ke blogger.com

2. Segera masuk ke Elemen Halaman => Edit HTML

3. Cari kode </head> , untuk mepermudah ketik CTRL+Shift+F.

4. Setelah ketemu letakkan kode dibawah ini, tepat sebelum 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>

5. Setelah selesai, silahkan cari kode yang seperti 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>

6. Apabila sudah ketemu, silahkan sobat sisipkan kode dibawah ini, tepat seperti contoh dibawah:

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

Contoh:

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

Note : Silahkan ganti tulisan yang berwarna hijau dengan angka sesuai keinginan, karena angka tersebut menunjukkan berapa jumlah artikel yang akan dimuncukan.

8. Setelah hal diatas sobat sudah lakukan, Simpan Template. Nah sampai disini untuk Edit HTML telah selesai. Lanjut lagi…

9. Sekarang pindah ke Tata Letak, dan kemudian Tambah Gadget yang terdapat di sidebar.

10. Sudahkah??? setelah itu pilih HTML/Javascript. dan kemudian masukkan kode dibawah ini:

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

11. Dan jangan lupa beri judul, dan Simpan.

Allhamdullilah akhirnya selesai juga, Cara Mudah Membuat Artikel Terkait Pada Sidebar. Namun juga pada artikel terkait ini akan selalu muncul dihalaman depan blog/Homepage juga, untuk menyiasati agar hanya muncul di halaman postingan saja, dapat anda ikuti Langkah ke-2, dengan menuju: Cara Membuat Widget Hanya Muncul Dihalaman Postingan.