Cara Membuat Related Post Simple di Bawah Postingan Blog

SEBELUMNYA Blogger Bandung sudah share Cara Memasang Related Posts Gambar Responsive di Bawah Posting Blogger dan Cara Memasang Artikel Terkait di Tengah Postingan Blog.

Kali ini tips blogging tentang Cara Membuat Related Post di Bawah Postingan Blog dengan desain simple. Hanya berisi daftar judul tulisan sehingga lebih ringan (fast loading).

Tampilan Related Postnya seperti gambar di bawah ini: 

Related Post di Bawah Postingan Blog

Fungsi Related Post

Kita bahas dulu fungsinya. Widget ini berfungsi sebagai navigasi sekaligus internal link untuk memudahkan pengunjung mengeksplorasi konten blog.

Related Post menampilkan tulisan dengan label yang sama secara otomatis. Jika satu label hanya satu postingan, maka related post tidak akan muncul.

Karenanya, pastikan setiap postingan Anda dikasih Label. Label ini semacam kategori atau tags untuk mengelompokkan postingan berdasarkan tema/topik.

Cara Membuat Related Post Simple di Bawah Postingan Blog

Cara Membuat Related Post di Bawah Postingan

1. Klik Tema > Edit HTML
2. Simpan kode berikut ini di atas kode </head>

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style>
<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>');
document.write('<a style="font-size:18px;font-color:#FF0000;" rel="dofollow" href="http://bos-tutorial.blogspot.com/">Tutorial Blog</a></font>');
}
//]]>
</script>

3. Simpan kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

<br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

4. Simpan Template.

Demikian tutorial mengenai Cara Membuat Related Post di Bawah Postingan.*

» Thanks for reading: Cara Membuat Related Post Simple di Bawah Postingan Blog

Tags: ,
Comments

Copyright © 2020 Blogger Bandung All Right Reserved
About | Kontak | Disclaimer | Sitemap