Cara Membuat Related Post Di Blog

Cara Membuat Related Post Di Blog Dengan Mudah

Jika di terjemahkan secaar bebas related post adalah postingan terkait, biasanya terletak di bawah postingan, related post secara otomatis akan menampilkan beberapa postingan terkait, yang sedang di baca oleh pengunjung blog, dengan bentuk yang beragam sesuai dengan setingan related post di blog tersebut.

Pada template Super Seo milik kang ismet, related post ini sudah ada, jadi jika anda memakai template tersebut, maka anda tidak perlu repot-repot membuat related post secara manual. Namun jika di template anda belum tersedia, maka caranya adalah dengan menambahkan kode-kode yang kita dapatkan dari para master blog yang membagikan ilmunya kepada kita.

Cara ini saya dapatkan ketika sedang mencari cara membuat related post, maklum di template yang saya pakai ini belum ada. Beberapa blog yang menyediakan tutor ini saya kunjungi, satu persatu saya coba, tetapi belum ada yang berhasil, hingga akhirnya saya menemukan tutorial yang bisa dijalankan di template blog saya (maaf nama blognya lupa, saking banyaknya  blog yang saya kunjungi).

Namun masalah muncul, related post yang terpasang di blog saya agak kurang menarik,  mana yang ukuran thumbnailnya terlalu besar, jumlah related post yang terlalu sedikit, hingga ukuran font yang terlalu besar, sehingga menurut saya kurang enak dipandang mata.

Setelah saya coba edit-edit sedikit, dan cek hasilnya, maka saya merasa ini lebih baik dari yang tadi, sehingga pada tampilan related postnya cukup menarik, berikut adalah langkah-langkahnya:

Masuk ke blog anda, klik template, kemudian klik edit html, klik ctrl + f, lalu ketikan pada kota search post-footer, lihat gambar di bawah ini:

Kemudian cari post-footer-line3, perhatikan gambarnya:

Setelah itu, pastekan kode yang sudah saya edit ini persis di bawah, post-footer-line3

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

.custom_images ul {display:inline; list-style:none}

.custom_images ul li {float:left; margin-right:1px}

#related-posts{ float: left; margin: 50px 0 0; width: 500px;}

#related-posts h2 {color: #444; font-family: Segoe UI,Arial; font-size: 24px; font-weight: normal; margin: 0; padding: 0 0 10px; text-align: left; text-transform: none;}

#related-posts h4 {font-size:1.4em; font-weight:normal}

#related-posts h5 {font-size:1.17em; font-weight:normal}

#related-posts h4, #related-posts h5 {margin: 0.3em 0px}

#related-posts ul{list-style-type: none; margin-left: -48px; width: 650px;}

#related-posts ul li{position:relative;float:left;border:0 none;margin:0px 4px 0px 4px;width:100px}

#related-posts ul li:hover{z-index:98}

#related-posts ul li:hover div{position:absolute;top:10px;center:5px;margin-left:0;width:150px}

#related-posts ul li img{background: #fff; width:100px; height:100px;}

#related-posts ul li div{position:absolute;z-index:99;margin-left:-999em}

#related-posts ul li .title{background:#f9f9f9;padding:5px 10px}

</style>

<div style='clear:both'/>

<div id='related-posts'>

<script type='text/javascript'>var ry=&#39;<h2>Related Posts</h2>&#39;;rn=&#39;<h2>None Realated Posts</h2>&#39;;rcomment=&#39;Comments&#39;;rdisable=&#39;No Comments&#39;;commentYN=&#39;yes&#39;;</script>

<script type='text/javascript'>

//<![CDATA[

var nothumb='https://lh6.googleusercontent.com/-eEyKnIr4mcw/TJ9r0SlNAUI/AAAAAAAAEOI/KK1Hew2EHwQ/s200-c/last%2528gr%2529256.jpg';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><h4><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h4><h5>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</h5></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};

//]]>

</script>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name != &quot;Guest Posts&quot;'>

<b:if cond='data:label.name != &quot;Feature&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>

</b:if></b:if>

</b:loop>

<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>

</div>

<div style='clear:both'/>

<script type='text/javascript'>

//<![CDATA[

function replaceText(){if(!document.getElementById){return;}

bodyText = document.getElementById("related-posts");

theText = bodyText.innerHTML;

theText = theText.replace(/s500-c/gi, "s200-c");

bodyText.innerHTML = theText;

}replaceText();

//]]>

</script>

</b:if>

Terakhir, klik simpan template, tunggu beberapa saat sampai proses penyimpanan selesai, jika sudah silahkan lihat hasilnya, Semoga berhasil.