Assalamu'alaikum sobat blogger semuanya, kali ini saya akan membahas tentang cara membuat artikel terkait di bawah postingan blog. Artikel terkait atau related post adalah sesuatu yang penting dalam sebuah blog, hal ini dapat memudahkan pembaca untuk mencari artikel artikel yang berkaitan dengan postingan kita. Hal itu juga dapat menarik pengujung untuk membaca artikel lainnya sehingga dapat meningkatkan traffic blog kita
Membuat related post sangat mudah, Anda hanya tinggal menambahkan beberapa script/code ke dalam template blog Anda, Silakan saja ikuti lagkah lahkah di bawah ini :
1. Pastikan sudah login ke blogger Anda dan pilih menu Template
2. Kemudian pilih menu Edit HTML,
3. Setelah itu carilah kata </head> di dalam kode template blog Anda, untuk memudahkan klik Ctrl + F pada keyboard untuk memudahkan pecarian.
4. Jika sudah ketemu, silakan copy kan kode pada kotak dibawah ini TEPAT DIATAS kata </head> tadi. berikut adalah kode nya :
<!--Related Posts with thumbnails Start-->
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</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/AVvXsEgCVQN3EaVaClGJXN_LdcpQY8sLTE5wjIlN9PpubZQSPTG_Gs6odj4eaZCmQ3lXx3Hvc7XfBALC4a7GdjF7YFl5JGD-DuKT0UXUDxJPxUbCugb5bGC0HogMJHJelODnhnqhcqGapNGWWV90/s1600/no-thumbnail.png'}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('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+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>
<!--Related Posts with thumbnails End-->
5. Setelah itu cari kata <b:if cond='data:post.hasJumpLink'> dengan cara yang sama menggunakan Ctrl + F. Biasanya kata itu ada dua, maka pilih saja yang terakhir, atau coba saja satu satu. Setelah itu copy kan kode di dalam kotak di bawah ini TEPAT SETELAH kode tersebut. berikut kode nya :
<!-- Related Posts with Thumbnails Code Start-->
<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 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=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Artikel Terkait :</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
6. Setelah semua selesai klik SAVE atau Simpan dan lihat hasilnya.
Angka 5 dapat di ubah sesuai keinginan Anda, untuk menampilkan jumlah artikel terkait yg muncul
kata ARTIKEL TERKAIT juga dapat diganti sesuai keinginan.
Angka 5 dapat di ubah sesuai keinginan Anda, untuk menampilkan jumlah artikel terkait yg muncul
kata ARTIKEL TERKAIT juga dapat diganti sesuai keinginan.
Demikianlah cara membuat menu Related post di bawah postingan, jika bermasalah silakan hubungi Admin, atau langsung koment di bawah postingan ini. semoga bermanfaat