Simple Blogger Related Posts Widget With Thumbnail

Having a mobile responsive related posts widget for a blogger blog is of great importance. Before now, every BlogSpot user would have to install LinkWithin related post widget but now we have a better alternative to LinkWithin which is a simple and stylish blogger related post widget with a thumbnail image.

A related posts widget has its own pros and cons and before sharing with you this simple LinkWithin alternative, I would first explain a bit about why you need a related post widget and also the side effect it pulls to your blog.

View Demo Live Preview

how does a  related posts widget work?

A related post widget as the name implies is a customizable posts widget just like the recent post, random post and popular posts. It organises a set of posts which are similar to the post in question. How does it define related posts? Through blog labels.

When you post an article you are most certain to add a blog label (category) to it, this tells the related post widget that these posts with the same blog label are alike and should be sorted together. That is the simple system operated by the related posts widgets.

How about when I don’t use labels? when you don’t use blog labels, the related post widget randomly selects blog post as related posts by doing this, it assumes that all posts on your blog are related since they all don’t have labels.

why do I need related posts widget? – Pros

Often times, bloggers demand certain widgets just because they have seen it somewhere else on the web without even knowing the exact use of the widget. You might also like blogger widget (related posts) is important for every blog for a few reasons which you might want to consider.

  1. Increase traffic
  2. Suggests new contents for readers
  3. Decreases your bounce rates
  4. More earnings for you
  5. Most certain improves your blog SEO
  6. better navigation for your site
Better navigation for your site: Whenever you apply for Google AdSense, it keeps rejecting your application for a few reasons which includes “clear navigation” – a visitor should be able to move around your blog easily and find what she/he needs without having problems.

thus, this brings in the function of a similar post widget which simply navigate blog visitors to pages similar to the one they are reading. By doing this, your visitors can easily move around contents they like without having problems.
Increase traffic: without a you might also like widget, a visitor would probably leave your website after reading the first post but with a related post widget, a visitor is most likely to read a post similar to the one he just read.
Many blog owners have used this system of what is related to increase their pageviews or traffic. Not forgetting; increase blog traffic is most certainly to bring increase earnings especially when you use services that pay per impression.

Decreased bounce rate: Bing and other search engines have always mentioned bounce rate as a ranking criterion for every blog, now you might be thinking I have SEO properly optimise my blogger blog and still bounce rate will be killing your site. Indeed to decrease your bounce rate, you need to speed up your blogger blog
but still, you need a related post widget especially when you publish short posts such as music and gossip bloggers. Including a you might also like blogger widget will help you your blog visitors stay longer on your blog,
which will definitely improve the SEO ranking of your blog, and next thing search engines will start showing your posts on the first page.

Cons of a related post widget

Something that saves you can also kill you. All related posts widgets often have similar problems and these problems always affect the loading of your blog.
Related posts just like every other post widgets, uses callback which decreases the loading speed of a blog. A smart way to reduce this effect is to limit the number of related posts shown per page. Because of the higher the number, the higher the callbacks to be made.
Other problems may be peculiar with different types of widgets. Related posts with thumbnail image often have the issue of non-optimized images while externally loaded related post widget such as LinkWithin, AddThis often act as rendering blocking JavaScript which again can kill your blog loading speed.

Other Types Of Related Post Widget

How to install Related Posts Widget For Blogger With Thumbnail.

You can hardly find a related post widget that is mobile friendly and responsive, which means it fits well into all screen devices. This is the same related post widget I was using in my old blog theme.
It is super fast and adapts to any devices screen. The original code was shared by HelpBlogger in this post and I optimised the code to build a responsive and mobile friendly related post widget.

Add related post widget to blogger

First thing first, you will have to backup your blogger template and you should do this each time you wish to add or remove codes from your Blogger HTML editor.
Navigate to Theme >> Backup/Restore >> Download theme. Your theme has just been backed up.

Step 1. 
Go to theme >> Edit HTML >> Using CTRL + F search for </head>

<style type=’text/css’>
.related-posts-container{margin:30px 0;border-bottom:1px dotted #eee}
.related-posts-container h4{font:19px Roboto;margin-bottom:20px;text-transform:uppercase;text-align:center;background:#2a3950;box-shadow:1px 1px 4px #999;padding:12px;color:#f5f5f5;font-weight:bold}.related-posts-container ul,.related-posts-container ul li{list-style: none;margin: 0;padding: 0;}.related-posts-container ul li a{text-transform:capitalize !important;font:bold 13px &#39;Open Sans&#39;, sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px &#39;Open Sans&#39;, sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba(0,0,0,0.04);padding:0.8em 0 !important;}.related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none;}li.related-post-item{margin:0 3% 3% 0 !important;width:22.7%;float:left;list-style:none;position:relative;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-thumb-large{width:100%;height:auto;border:none;margin:0px auto 10px;padding:0 !important;}.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{padding-left:74px;}.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){margin:0 0 4% !important;}.related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:42% !important;float:left;margin:0 4% 4% 0 !important;padding:3% !important;}.related-thumb{float:left;height:64px;margin-right:10px;object-fit:cover;width:64px;}.related-posts-6 li,.related-posts-6 a{line-height:0 !important;}.related-posts-6 .related-thumb-large{margin-bottom:0;}.related-posts-7 li.related-post-item{margin:0 !important;width:25% !important;}.related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77,77,77,0.2);}.related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.related-wrapper .related-title{vertical-align:middle;display:table-cell;color:#ffffff;font:bold 16px &#39;Open Sans&#39;, sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px &#39;Open Sans&#39;, sans-serif;color:#999999;}
 @media only screen and (max-width:1165px){li.related-post-item{margin:0 3% 3% 0!important;width:47%!important;float:left;list-style:none;position:relative}}
</style>

When found, paste the above CSS above it.
Step 2.
You need to decide where the widget should be shown. For best performance, a related post widget is added to the footer of every post.
Using CTRL + F search for <div class=’post-footer’>.

Note: you will find it twice, paste the below code below the second one.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<div class=’related-posts-container’ id=’related-posts-widget’/>
<div style=’clear: both;’/>
<script type=’text/javascript’>
var labelArray = [<b:if cond=’data:post.labels’><b:loop values=’data:post.labels’ var=’label’>&quot;<data:label.name/>&quot;<b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if></b:loop></b:if>];
var relatedSettings = {
blogURL:&quot;<data:blog.homepageUrl/>&quot;,
relatedHeading:&quot;&lt;h4&gt;&lt;span&gt;<i aria-hidden=’true’ class=’fa fa-fire’/>  Others Are Reading&lt;/span&gt;&lt;/h4&gt;&quot;,
relatedPosts:4,
relatedStyle:4,
thumbnailSize:&quot;w300-h200-p-nu&quot;,
defaultThumb:&quot;https://lh3.googleusercontent.com/-yqkV5evq9Ak/WTtz-rYB67I/AAAAAAAAF3A/PQUCza1ZUag4hf3kcVJONJ8ZkJxerqB9QCLcB/w300-h200-c/bloggingprince.jpg&quot;,
roundThumbs:false,
titleLength:&quot;auto&quot;,
snippetLength:40,
centerText:false,
openNewTab:false
};</script>
<script type=’text/javascript’>
//<![CDATA[
var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]=”undefined”==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement(“script”);d.type=”text/javascript”,d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;–b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i=”object”==typeof labelArray&&labelArray.length>0?”/-/”+h(labelArray)[0]:””,j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(//$/,””)+”/feeds/posts/summary”+i+”?alt=json-in-script&orderby=updated&start-index=”+c+”&max-results=”+d.relatedPosts+”&callback=startRelated”)},k=function(a){var l,m,n,o,p,q,b=document.getElementById(“related-posts-widget”),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class=”related-posts-‘+e+'”>’,g=d.openNewTab?’ target=”_blank”‘:””,i=d.centerText?”text-align:center;”:””,j=d.roundThumbs?”-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;”:””,k='<span style=”display:block;clear:both;”></span>’;if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o=”auto”!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+”&hellip;”:n,p=”media$thumbnail”in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(//s[0-9]+(-c)?/,”/”+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=[“January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”],u=l.split(“-“)[2].substring(0,2),v=l.split(“-“)[1],w=l.split(“-“)[0],x=0;x<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+” “+u+” “+w,q=”summary”in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?/?>/g,” “).replace(/<.*?>/g,””).replace(/[<>]/g,””).substring(0,d.snippetLength)+”&hellip;”:””;for(var y=0,z=c[r].link.length;y<z;y++)m=”alternate”==c[r].link[y].rel?c[r].link[y].href:”#”;1==e?f+='<li><a href=”‘+m+'” ‘+g+”>”+o+”</a></li>”:2==e?f+='<li><a href=”‘+m+'” ‘+g+’><div class=”related-title”>’+o+'</div></a><div class=”related-snippets”>’+q+”</div></li>”:3==e?f+='<li class=”related-post-item” style=”‘+i+'”><a href=”‘+m+'” ‘+g+’><img alt=”related post” class=”related-thumb-large” src=”‘+p+'” style=”‘+j+'”><div class=”related-title”>’+o+'</div></a><div class=”related-snippets”>’+q+”</div></li>”:4==e?f+='<li class=”related-post-item” style=”‘+i+'”><a href=”‘+m+'” ‘+g+’><img alt=”” class=”related-thumb-large” src=”‘+p+'” style=”‘+j+'”><div class=”related-title”>’+o+'</div></a><div class=”related-date”>’+postdate+”</div></li>”:5==e?f+='<li class=”related-post-item” style=”‘+i+'”><a href=”‘+m+'” ‘+g+’><img alt=”relaated ” class=”related-thumb-large” src=”‘+p+'” style=”‘+j+'”><div class=”related-title”>’+o+”</div></a></li>”:6==e?f+='<li class=”related-post-item”><a href=”‘+m+'” ‘+g+’><img alt=”” class=”related-thumb-large” src=”‘+p+'” style=”‘+j+'”><div class=”related-wrapper” style=”‘+j+'”><div class=”related-wrapper-inner”><div class=”related-title”>’+o+”</div></div></div></a></li>”:7==e?f+='<li class=”related-post-item”><a href=”‘+m+'” ‘+g+’><img alt=”” class=”related-thumb-large” src=”‘+p+'” style=”‘+j+'”></a></li>’:8==e?f+='<li class=”related-post-item”><a class=”related-post-item-wrapper” href=”‘+m+'” ‘+g+’><img alt=”” class=”related-thumb” src=”‘+p+'” style=”‘+j+'”><div class=”related-title”>’+o+'</div></a><div class=”related-date”>’+postdate+”</div></li>”:9==e&&(f+='<li><a href=”‘+m+'” ‘+g+’><img alt=”” class=”related-thumb” src=”‘+p+'” style=”‘+j+'”><div class=”related-title”>’+o+'</div></a><div class=”related-snippets”>’+q+”</div></li>”)}b.innerHTML=f+=”</ul>”+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(//$/,””)+”/feeds/posts/summary”+i+”?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex”)}(window,document,document.getElementsByTagName(“head”)[0]);
//]]>
</script>
</b:if></b:if>

Customization

This related post widget is packaged with a lot of features which you can edit manually, follow the below guide to know what each value stand for.
relatedHeading – This defines the heading of the widget which in most cases is “you might also like, what others are reading, related posts” etc.
relatedPosts – Number of related posts to be displayed per post. A higher number will result in too many callbacks so be careful not to choose too much. 4 per page is moderate.
relatedStyle: You can choose a different style, but I have only made number responsive and that is what I used on my formal template. you can choose from 9 different styles. 
Some of the available styles include related posts without thumbnail, stylish related post with thumbnail and snippet etc.
thumbnailSize – If you increase the size of images you should also consider increasing the size to avoid having a blurred image.
defaultThumb: Even when your posts don’t have images, the related post widget still works and shows an image. You can change the URL of the image to any image of your choice.
roundThumbs: A totally customizable related post widget. You can choose between square thumbnails and rounded thumbnails. By default, it shows square thumbnails and you can simply change it to round thumbnails.
titleLength: by default, all letters in the post title are shown, but when you have long titles, it becomes ugly – you can set in a figure to limit the number of title word count.

snippetLength: The snippet option is not available in style 4 but when you select other styles such as style 9, you might have a need to change this.

centerText: Texts by default floats from the left by if you wish to centre the texts (post title and snippets) feel free to edit this option.

openNewTab: Where do you want your related post content to open when clicked? is it on the same tab or a different tab. This is where you decide that.

Open Message For Blogger Default Theme Users

If you are using default blogger template on your blog, this widget will not work on mobile but will work on a desktop. In order to make it work on mobile also, you need to enable the code in the mobile view.

Note: If you are using a responsive template, it should work on mobile and desktop but if you are using default blogger theme you should follow the below steps.

what to do?

Go to step 2 above. Instead of pasting the code below only the second <div class=’post-footer’>,  paste it below both the first and second code.

After doing that, you should see it showing in both views. If it doesn’t show then you need to read “Customize Blogger Custom Mobile Template” to understand more above mobile templates.

Rounding Up
This is how simple it is to add a related post widget to blogger blog. Many bloggers searching for a perfect LinkWithin alternative can use this related post widget on their blogger blog. It is fast and neat.

Have any issues? report it to me at the comment box and if this post helped you, don’t fail to share with your social friends.

Related Articles

  • How To Create Drop Down Navigation Menu With Submenu In Blogger
  • Blogger Recent Post Widget With Home, Next And Previous Option
  • Find Widget ID, Section ID Using Inspect Tool
  • Increase SMO – Properly Link Facebook To Your Blogger Blog
  • Add WordPress Style ShortCode Tabs And Accordions To Blogger
  • How To Add Advanced Disqus Comments To Your Blogger Blog
  • 7 Comments - Post Yours! How to? ▼

    1. One of the great work.John Thank You.

    2. send me the URL let me view it

    3. 9naijet(dot)blogspot(dot)com

    4. Your widget works well but reducing thumbnail size 100×100 does not work, style 5. Any solution therefore? TIA

    5. you can archive this using CSS

    6. Nice sir ! Great work

    7. I need to commend you handwork. I love this blog! How can I subscribe for the feeds?? To get latest updates

    Leave a Reply

    1 Shares
    Share1
    +1
    Tweet
    Pin
    Share
    Stumble