Cara membuat related posts keren untuk template contempo

Related post untuk template contempo dan template terbaru Blogger lainnya tentu sudah banyak yang menulisnya, akan tetapi bentuknya sangat bersahaja, maka itu saya mencoba membuat atau mendesain satu Related Post yang lebih "Stylish" tanpa menghilangkan unsur kesederhanaanya. Mari kita memasangnya. 

Langkah pertama:

Cari kode <data:post.body/> letakan kode yang telah saya modifikasi ini dibawahnya:

<br/><br/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='4'><b><i aria-hidden='true' class='fa fa-american-sign-language-interpreting fa-2x gradient-icon'>Related Posts</i> : </b></font><font color='#000'><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>

Catatan:

Sengaja saya lakukan modifikasi ini agar model related post untuk Tema contempo tidak monoton, kalau anda lihat saya memasukan elemen fa fa awsome, artinya anda juga harus memastikan template anda telah terpasang kode fa fa awsome di atas kode </head> kodenya adalah:

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Namun jika di template contempo anda sudah ada kode diatas sebelumnya, lebih baik abaikan saja langkah ini.

Langkah Kedua: Cari kode </head> dan lalu letakan kode dibawah ini diatasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
</b:if>

Langkah ketiga: Cari kode ]]></b:skin> dan copy lalu pastekan kode dibawah ini diatasnya:

.gradient-icon {
background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: initial;
}

Save Template.