Sponsor Post

How to Add Random Post in Blogger with Pictures

Monday, 15 August 2016

How to Add Related Post Widget for Blogger with Thumbnail

Hello friends, welcome to the Techtspot Blogger tutorial today I will show you how to add Related post widget for Blogger blog with thumbnail with pictures.
How to Add Related Post Widget for Blogger with Thumbnail
Today we insert related posts with thumbnails in Blogger blog post footer and we can say show related stories under each post, it is linked to related stories using our Blogger blog labels. 

These are Following Steps:-


Step 1: Go to Blogger Theme then click Edit HTML button.
Add Related Posts Widget To Blog1
Step 2Click anywhere in the Code Press Ctrl+F type </head> tag and Paste the Code before in the </head> tag.
Add Related Posts Widget To Blog2
<!--Related Posts with thumbnails Scripts 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]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/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 End-->
Step 3Again Press Ctrl+F type “ <div class='post-footer'> " then hit Enter Two times and Paste the Code before in <div class='post-footer'> tag and click Save Theme button.
Add Related Posts Widget To Blog3
<!-- 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  style="font-size: 9px; text-decoration: none;" href="https://techtspot.blogspot.com/2016/08/add-related-posts-widget-to-blog.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Step 4Go to Blogger Blog.


Read More:- 
How to Add Popular Posts in Blogger with Thumbnails
How to Add Follow By Email in Blogger
How to Add Download Link in Blogger
How to Add Read More Button in Blogger


I hope you enjoy this Post. If any problem comment it.

19 comments:

  1. Thank you so much ! You helped me a lot with this ! :D

    ReplyDelete
  2. Unfortunatly, this widget not working properly. I used two types of widget that you show. Both of them inactive in my blog. How to solve it or it stop now.

    ReplyDelete
    Replies
    1. hello there

      if this widget is not work properly then use LinkWithIn related post widgets

      Delete
    2. I also try LinkWithin but same problem.

      Delete
    3. what problem in LinkWithIn related post widgets

      Delete
    4. I don't know what's going on. I follow all LinkWithln steps and apply to my site. After doing this step I visit my site. But there was no changes. Related post not show? Note that, there was said ind Linkwithln site that, https not work those widget it needed some HTML correction. I also do this job but fail another time.

      Delete
    5. hello there

      i m visit your blogger http://creativehousee.blogspot.com/ there already add LinkWithIn related post widgets. if you adding LinkWithIn related post widgets than it take a little time to showing in blog post footer

      Delete
    6. What Can I do now? I really frusted this situation.

      Delete
    7. i can add this thing on your blog you can only give me any disk number then i can remotely connect your computer then i cab add this things ok :)

      Delete
    8. If you don't mind can you share some resources or tutorial to fixed this problem. Actually I can't share any remote connect. Or you can send me a email that help me to connect with you.

      Delete
  3. This Code is work now visit my blog https://a2z-songs-lyrics.blogspot.com

    ReplyDelete
  4. i tried it on my site www.sataddicts.com

    ReplyDelete
  5. Thank u so much ! I really appreciate u for this .

    ReplyDelete