Cara Membuat Related Post Keren Pada Blog Anda

Di postingan kali ini saya akan berbagi tentang bagaimana cara membuat related post atau yang biasa kita kenal dengan artikel terkait. terlebih dahulu kalian harus tahu apa itu related post, dan apa juga kuntungan menggunakan related post di blog sobat. silahkan di simak di bawah ini

Apa itu Related Post ??

Artikel terkait adalah Sebuah link atau url yang di kelompokan dan saling berkaitan atau berhubungan dan bahkan bisa satu topik.makanya di dalam script artikel terkait tidak akan bisa bekerja dengan baik jika postingan anda belum anda kasih Label.

pengertian lainnya..

Related Post (Artikel Terkait) adalah suatu navigasi yang memungkinkan pengunjung untuk menjelajahi blog/website anda lebih lanjut dengan membaca artikel terkait. Pada suatu template yang terpasang di sebuah blog, ada template yang langsung meng-include-kan fitur ini, dan ada pula yang tidak. Jika template anda tidak terpasangkan Related Post/Artikel terkait, silahkan baca thread ini lebih lanjut.

Jadi apa fungsi raleted post untuk blog anda ???

Related Post/Artikel terkait adalah salah satu unsur penting yang mempengaruhi Search Engine Optimization (SEO) blog, percaya tidak percaya, navigasi yang satu ini dapat meningkatkan Pageview (PV) anda sebanyak 20-40%, angka ini akan semakin meningkat seiring dengan banyaknya artikel yang memiliki kesamaan topik di blog anda.

Berikut adalah fungsi lain Related Post yang perlu anda ketahui:

Meningkatkan pageview (PV)
Mempercantik tampilan blog
Memfasilitasi pengunjung untuk mempermudah mereka mencari artikel lain yang memiliki kesamaan topik
Menjadi salah satu syarat yang harus dipenuhi blogger jika ingin menjadi publisher adsense (Kategori Navigasi)
berguna untuk memudahkan para pembaca mencari konten yang hampir serupa atau berhubungan. maka pengunjung akan berlama lama berada di blog kita, dengan begitu secara otomatis pun halaman yang terbuka atau page views pun akan bertambah.

oke anda sudah membaca semua itu lalu apa selanjutnya ??

Bagaimana Cara Membuat Related Post ?

Pemasangan related post sendiri tidak terlalu sulit, pertama anda masuk ke bagian Tema di blog sobat kemdian klik Edit HTML, dan masukan script yang saya berikan ini kedalam tema blog anda. Ada 2 macam style / tampilan related post berbeda yang akan saya berikan, anda tinggal memilih yang mana yang anda sukai untuk blog sobat.

A. Membuat Related Post Dengan Gambar di Blogspot :

1. Copy dan Pastekan kode di bawah ini dan taruh di atas kode </head>, cari kode tersebut dengan menggunakan Ctrl + F

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:100%;border-top:3px solid #ddd;margin:5px 0}
#related-posts .judul{background:none;color:#333;font:16px Oswald;padding:5px 0}
#related-posts .maskolis_img {padding:0 0;width:140px;height:95px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#related-posts .maskolis_img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
</style>
<script type="text/javascript">//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhai2C6Y-2xrq5jFr_ALnFjC3QaaphdCdAKoWrdW4OkL-p4d7c6djjOKuF9AlUwhv00pQ6t5TPUeQ4utvMxtQTehZ7rG3RLJKmRPVGYy6tj73J3F-BnEypq4Kq-JJuNMrvqwIdqIw-iFKCK/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<div class="judul">'+relatedpoststitle+'</div>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 12px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="width:140px;padding:0 0;color:#666;height:35px;text-align:center;margin:0px 0px; font:bold 11px Arial; line-height:14px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}//]]>
</script>
</b:if>

Catatan: kode ber-warna merah adalah ukuran lebar gambar/foto. Sesuaikan dengan lebar halaman text area posting blog Anda, bisa diubah lebih kecil atau lebih besar.

2. Langkah berikutnya cara membuat Related Post dengan Gambar adalah dengan Copy + Paste kode berikut ini di atas kode <div class='post-footer'> atau di bawah kode <data:post.body/> yang kedua atau ketiga.

<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_thumbs&max-results=8"' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="Related Posts :";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>

Catatan: kode berwarna biru adalah jumlah related post, bisa diubah menjadi 8 atau bahkan 12. Sebaiknya empat saja, jangan terlalu banyak.

3. Save Template!
Jika tidak berhasil, coba pindahkan kode JavaScript di langkah No.1, yaitu kode yang diawali denngan <script type="text/javascript"> dan diakhir dengan </script>, pindahkan ke atas kode </body>

dibawah ini merupakan contoh related post dengan gambar.

B. Cara Membuat Related Post Tanpa Gambar

1. Cari kode </head> Setelah ketemu copy kode dibawah ini tepat diatas kode </head>

<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>

2. Cari lago kode <data:post.body/> (Gunakan CTRL+F untuk mempercepat pencarian)
Selanjutnya copy dan paste kode dibawah ini tepat dibawah kode <data:post.body/> (Biasanya terdapat 2 kode <data:post.body/>, tempatkan pada kode yang ke 2).

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

3. Terakhir Simpan Template

Cari Blog Ini

mas rolihan