Cara Membuat Artikel Terkait (Related Post) Di Sidebar

Cara Membuat Artikel Terkait (Related Post) Di Sidebar - Dihari yang cerah ini, admin mau coba share tutorial Cara Membuat Artikel Terkait (Related  Post) Di Sidebar. Mungkin sudah banyak yang membahas tentang artikel, namun tidak ada salahnya dong kita bahas sekarang. Related Post atau bisa diartikan artikel terkait yang muncul sesuai dengan label/kategori postingan blog kita.

Artikel Terkait Sidebar

Lalu bagaimana cara membuat nya ?
Berikut langkah-langkah membuatnya:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berikut: </head> (gunakan Ctrl+F di keyboard ),setelah ketemu tinggal letakkan kode CSS berikut tepat 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>

6. Kemudian cari 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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

7. Kemudian ganti kode diatas dengan kode berikut 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 != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

---

max-results=10 : adalah jumlah artikel terkait yang akan ditampilkan, silahkan diganti sesuai dengan kebutuhan.

8. Simpan Template, dan lanjut ke langkah berikut ini

9. Next, masuk ke Page Element > Add a Gadget > HTML/JavaScript > lalu copy paste kode dibawah ini kedalam konten HTML/JavaScript.

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

10. Simpan dan lihatlah hasilnya.

Silahkan dibagikan keteman Via

Tweet

Artikel Terkait :

Tips and Trik Blogger

• Definisi Dan Fungsi SEO di Web Blog
• Cara tes dan cek berat blog dengan 10 situs tes blog
• Cara Membuat dan Memasang Search Engine di Blog
• Cara Mengganti Icon Blog di Blogger
• Cara Membuat | Menambahkan 2 Kolom Dibawah Header di Blog
• Cara Membuat Slide Show Album Foto di Blog
• Cara memasang Link Tanpa harus di Klik Terbuka Sendiri
• Cara Mudah dan Gampang Mendapatkan Sponsor | Iklan di Blog | wordpress
• Cara Membuat Menu horizontal di Blog
• Cara Memasang / Buat FP Melayang di Blog
• Cara Memasukan atau Upload File Microsoft Word | Excel | Power Point ke Blog
• Cara memasang widged iklan banner di blog
• Cara membuat link pada gambar di blog
• Cara memasang TV Online streaming di Blog dan Kodenya
• Cara membuat Older Post dengan Angka
• Cara Agar Blog Banyak yang Follow
• Cara menambahkan Google Sitemap ke blogger
• Arti Kode Kode PadaTemplate Blog
• Cara Tes Kecepatan loading Blog biar tidak lemot
• Daftarkan Blog ke Ratusan Search Engine Directory
• Cara Menghapus widget Blog yang tersembunyi
• Cara Membuat Daftar Isi Hanya Dari Satu Label
• Cara membuat komentar pengunjung berbeda dengan admin blog
• Cara Mellebarkan Atau Menambah Ukuran halaman Template Blog
• Cara Melihat Posisi Blog Pada Search Engine