Cara Membuat Related Post di Bawah Postingan Blog

  • Whatsapp

Tips Blogging kali ini tentang Cara Membuat Related Post di Bawah Postingan Blog. Reated Post biasa disebut juga Artikel Terkait atau Postingan Terkait.

Related Post Blogger

Related Post Blogger

Related Post yang saya share adalah yang tampilannya sederhana (simple), biar ringan alias fast loading. Seperti gambar ini:

Related Post Blogger

Baca Juga

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

Save! Simpan template.

Masih banyak desain related post lainnya, seperti related post plus gambar responsive.

Happy Blogging!

 

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *