Tips blogging kali ini tentang Cara Membuat Related Post di Bawah Postingan blog. Reated Posts biasa disebut juga Artikel Terkait atau Postingan Terkait.
Related Post yang saya share adalah yang tampilannya sederhana (simple), biar ringan alias fast loading. Seperti gambar ini:
Fungsi Related Post
Related Post berfungsi sebagai internal links sekaligus navigasi menu. Widget ini untuk meningkatkan pageviews dan “menggoda” pengunjung membaca sebanyak mungkin koten blog kita.
Widget ini tidak ada dalam template blog bawaan Blogger. Jadi, kita harus memasang sendiri. Berikut ini cara membuatnya.
Cara Membuat Related Post di Bawah Postingan Blog
1. Klik Tema > Edit HTML
2. Simpan kode CSS Related Post simple berikut ini di atas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {margin: 15px 0px;}
#related-posts h2 {font-size:16px;font-weight: bold;color: #666;margin-bottom: 0.75em;}
#related-posts a {font-size: 14px;color: #333;border-bottom:1px dotted #E2E2E2;display:block;padding:5px 0;text-decoration: none;}
#related-posts a:hover {color: #48d;}
#related-posts ul {padding: 0px;list-style-type: none;}
#related-posts li {padding: 0;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<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(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
</b:if>
3. Simpan kode HTML/Javascript Related Post berikut ini di bawah kode <div class=’post-footer-line post-footer-line-3′> atau di bawah kode <div class=’post-footer’>
<b:if cond='data:blog.pageType == "item"'><div id='related-posts'>
<b:loop values='data:post.labels' var='label'> <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&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script></div></b:if>
Save! Simpan template.
Masih banyak desain related post lainnya, seperti di Romeltea Media dan related post plus gambar responsive.
Happy Blogging!
