Cara Membuat Related Post Simple Untuk Blogspot

Baca Juga

Fitur related post berguna agar pengujung blog tertarik untuk membuka artikel kita yang lainnya sehingga pengunjung betah berlama lama berada di blog kita, selain itu fitur related post juga menambah total tayangan halaman dan juga meningkatkan penghasilan blog lewat fitur related post tersebut, nah bagaimana cara memasang fitur related post ? nah ikuti langkah langkahnya dibawah ini.

Berikut Langkah-langkah Cara Membuat Artikel Terkait atau related post :
1. Login Ke akun Blogger.
2. Klik Template, Backup template terlebih dahulu, untuk jaga - jaga,
atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template agar bisa untuk membuat fitur pencarian.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode), dan cari kode berikut ]]></b:skin> atau </style>. Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas ]]></b:skin> atau </style> di bagian head.

/* Related Post Cepat
--------------------------------- */
#related-postsku{float:left;width:100%;margin-top:5px;margin-left:0px;font-size:13px;font-family:Arial,serif;margin-bottom:0px;}
#related-postsku a{text-decoration:none;}
#related-postsku a:hover{text-decoration:none;}
#related-postsku ul{border:medium none;margin:10px 0px 10px 0px;padding:0;}
#related-postsku ul li{display:block;background:url("https://lh3.googleusercontent.com/-6iznc81V_pQ/UcmgB6yKU3I/AAAAAAAABWc/NhxmD6789YU/s25/rss.png") no-repeat 0 0;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:30px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #cccccc;}

7. Cari kode berikut </head>
8. Masukan Kode berikut diatas </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>

Catatan: Jika sudah menggunakan JQuery versi lain, maka lewati langkah ini.

9. Kemudian masukan Kode berikut diatas </head>

<!-- Artikel Terkait Start Bro-->
<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>
<!-- Artikel Terkait End Bro-->

10. Cari kode berikut <div class='post-footer'>
Kode tersebut mungkin ada 2, pertama untuk versi mobile,
kedua untuk versi web (biasanya yang ke2).

11. Masukan Kode berikut diatas <div class='post-footer'> yang ke2 (versi web).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-postsku'>
<font style='font-size:19px;color:#CC333B;font-family:Arial;'><b>Artikel Terkait: </b>
</font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'/><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>

Kira-kira tampilannya seperti ini

<div class='post-footer'>

jika sudah silahkan save template anda. dan lihat hasilnya. apakah dapat berfungsi dengan baik di blog anda, jika ada kendala silahkan tanya di kolom komentar.