Learn how to add a related posts widget with a thumbnail in your blogger blog or How to Add Related Post Blogger Script With Thumbnail. Stylish related post widget for a blogger or simply related post widget for a blogger or Related post widget for a blogger with a thumbnail or simply related post widget for a blogger or Related Post Blogger Script with thumbnail blogger.
Related Post Blogger Script widgets play an important role in a blog to generate more pageview and it helps to reduce bounce rates. A visitor is very much likely to read related articles if they are available.
Here, I have written a tutorial on how to add Related Post Blogger Script with thumbnails on your blog.
Table of Contents
There are many related post widgets available that you can add to your blog, but if you are looking for a widget that you can add to your blog and customize as per your requirement, there is one for you.
Read: How to Add Read More in Blogger Using Jump Break
How to Add Related Post Blogger Script
Add Related Posts Widget With Thumbnail In Blogger. I am also using the same related post widget on my blog.
- Step 1: Go to Blogger Dashboard → Theme → Edit HTML
- Step 2: Click anywhere inside the Template code area and Press CTRL+F
- Step 3: A search box will appear, find </head>
- Step 4: Paste the below code Just above </head> tag
<!-- Related Post Blogger Script by samadhanportal.com start -->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-post-title{color: #000000;margin-bottom: 0.75em;padding: 0 10px 0 0;text-align: left;font-size:20px;font-weight:bold;}
#related-posts a {color: #000000;}
#related-posts ul { list-style-type: none; color: #000000; }
#related-posts li { padding: 8px 2px; clear: both; overflow: auto; border: 0px solid #CCC; margin: 5px 5px 8px 5px;}
.image_left{ float: left; margin: 0px 10px 10px 2px; padding: 0px; width: 80px; height: 56px;}
#related_here{ float:left; width: 49%; padding: 0px; margin:0px; }
#related_here2{ float:right; width: 49%; padding: 0px; margin:0px; }
.related_all_ul{overflow: auto;}
</style>
<script type='text/javascript'>
//<![CDATA[
function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");if(e.feed.entry[l].media$thumbnail)var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/))var a=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];else var a="http://1.bp.blogspot.com/-a-3WZRtj7pw/VoxaVk-cPMI/AAAAAAAABMo/ivQ1HVw0ZME/s250-Ic42/no-thumbnail.png";relatedImage[relatedTitlesNum]=a;for(var n=0;n<t.link.length;n++)if("alternate"==t.link[n].rel){relatedUrls[relatedTitlesNum]=t.link[n].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=relatedTitles[r],t.length+=1,t[t.length-1]=relatedImage[r]);relatedTitles=l,relatedUrls=e,relatedImage=t}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1),relatedImage.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random()),l=0;for(relatedTitles.length>1;l<relatedTitles.length&&20>l&&l<maxposts;)l%2==1?document.getElementById("related_here2").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>":document.getElementById("related_here").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>",t<relatedTitles.length-1?t++:t=0,l++;relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length),relatedImage.splice(0,relatedImage.length)}var relatedTitles=new Array,relatedImage=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script>
</b:if>
<!-- related post widget by samadhanportal.com end -->- Step 5: Now open the search box again and search <div class=’post-footer’>
- Step 6: Just above <div class=’post-footer’> Paste the following code:
<!-- Related Post Blogger Script by samadhanportal.com start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<p id='related-post-title'>Recommended Posts For You</p>
<div class='related_all_ul'>
<ul id='related_here'/>
<ul id='related_here2'/>
</div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=7"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'> var maxposts=4; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script>
</div>
<div style='clear: both;'/>
</b:if>
<!-- Related Post Blogger Script by samadhanportal.com end -->- Step 7: Save your Template.
Read: 5 Best Blogging Platform For Writers to Make Money
Related Post Blogger Script Customization
- If you want to change the CSS style according to your template design you can change it in the related posts‘ CSS code.
- You can change no. of posts to appear in the Related Post Blogger Script. Just change the number in maxposts=4; in red colour.
Read: Best SEO-Friendly Blogger Template Free
I hope you find this article very helpful to you so don’t forget to share this post on your network.