Membuat related post sederhana di blogger

Related post atau artikel terkait merupakan kumpulan link yang menuju ke postingan lain yang memiliki topik yang sama. Related post sering ditempatkan pada bagian bawah dan ditengah-tengah postingan.

Di blogger sendiri belum memiliki widget ini, sehingga anda perlu membuatnya sendiri secara manual. Untuk stylenya berbeda-beda namun yang akan saya bagikan ini merupakan related post yang sederhana yang hanya menampilkan link judulnya saja tanpa cuplikan dan thumbnail.

Cara membuat related post sederhana di blog

1. Masuk ke dashboard blogger anda.
2. Berikutnya anda klik Tema, Edit HTML.
3. Letakkan kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts{float:left;width:100%;margin:10px;padding:1px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPP4YUMhghGY22cz3j3C0iXdZpXLy-FlRFJoYLgtqriSh90laPPhEUR0Eacu2UEyporaGT7NNno-BAnY1yWjM6-MqoOKROxaf7Gm3LoC9kt6kfo3J0qxml2wVa-vGCCPtUPS3QMYW2q1aITNDcvF4qwzph6jhxBKHEBIiB7UNqUFFtF6k/s1600/grid-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}
</style>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>
    </b:if>

4. Selanjutnya anda letakkan kode berikut ini di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<div class='clear'/>
</b:if>

5. Terakhir anda klik Simpan.

Agar lebih menarik, silahkan anda modifikasi sendiri sesuai dengan keinginan masing-masing, semoga bermanfaat.