Cara nak letak "Related Post" dalam blog

Sudah 2 hari mencari macam mana nak letak related post kat blogger memandangkan Linkwithin sudah tidak berfungsi di blog ni. Dah banyak resubmit link blog kat Linkwithin siap buat report lagi sebab tak muncul widget related post kat blog tapi masih tak berjaya juga. Sudah putus harapan dengan Linkwithin maka cari alternatif lain.

Tada, hasil pencarian saya.

Step 1
(A) Logging in https://www.blogger.com.
(B) Click on "Templates".
(C) Click on "Edit HTML".



Step 2
(A) Find </head>
(B) Just above the</head> put below code
(C) You can modify all the link which showing in red color.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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/AVvXsEhCOgpUa9EdB6ve27oebaKg15szlf4bOL2aB3yqP70NUeQ3mD9NSO_Yg7q4onrCBo6FjVmBcn1TIJgAkQsI4dpFon7PqFogB4Q7KHwLUSShQtrbHiRowzUGi_gmhiyWDRthKfYZpBTKSWZv/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 Scripts and Styles End-->





Step 3
(A) Now search <div class='post-footer'> 
(B) You will see <div class='post-footer'>  many time but you have to stop on second <div class='post-footer'> .



Step 4
(A) Just above <div class='post-footer'> put below code.
(B) You can change the related post count after modify the link which is showing in red color.
(C) Click on Save Templates

<!-- Related Posts with Thumbnails Code Start-->
<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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style='font-size: 9px;float: right; margin: 5px;'><a href='http://www.guruoftips.com/2016/12/how-to-create-related-posts-in-blogger.html' rel='nofollow' style='font-size: 9px; text-decoration: none;'>Click Here To Create Free Related Posts Widget For Your Blogger</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Step 5-Now you have done in the any post where you have marked any label. You will see link a per below picture. 

Memandangkan dia sudah letak link website kat coding related post dia, jadi saya promote lagi sekalilah. Bolehlah lawat ke blog ->http://www.guruoftips.com untuk lihat tips lain pula.

P.s : Manalah hilangnya breadcrumb kat blog saya ni ya? Haha

Lama sangat tak buat sportcheck kat blog sampai blogger dah "bersihkan" breadcrumb saya.

Ohh breadcrumbs