How to Add a Custom Related Posts Widget in Blogger

Team TeachWiki

One of the significant components inside a blog format is the related post section. Regardless of how great is your content, except if you don't offer comparative or matching content passages around the blog post, you can't expect engaging and multi-page sessions from the readers.Search engines also really like to rank sites — on which — the readers invest more time browsing the content. Today, we will figure out how to add a related posts widget on a blog without using any third party plugin. This widget will show up at the end of the post on single post or pages. After adding this, you'll definitely witness an increase in the quantity of post views.

Attention! Before doing any kind of changes in your site's template take a backup first. This will helps you to restore your theme later.

A better strategy will be to initially test it on a fake blog. I've utilized this related post widget on one of my sites for quite a long time. Keep in mind, on the off chance that your blog is new with only several posts, this widget may not function true to form. In this way, ensure there are an enough number of posts on the blog for it to work — perfectly.

Add a Custom Related Posts Widget in Blogger Like This

If you have little bit knowledge about css you can easily customize this related post widget according to you theme style for better appearance. Guy's let us start to learn how to add this widget into your blogger blog.

  • Login to your blogger account - Create account
  • Go to Theme > edit html 
  • Then open blog1 widget
  • Paste given code after any </b:includable> tag as shown in upper image.

<b:includable id='post-related'>
<div class='related-post' expr:id='&quot;related-post-&quot; + data:post.id'/>              
<script>
var labelArray = [&quot;YOUR LABLE GOES HERE&quot;, &quot;demo&quot;, ];
var relatedPostConfig = {
    homePage: &quot;https://beinginstructor.blogspot.com/&quot;,
    widgetTitle: &quot;<div class='widget_title'><div class='title'><data:messages.youMayLikeThesePosts/></div></div>&quot;,
    numPosts: 8,
    summaryLength: 370,
    titleLength: &quot;auto&quot;,
    thumbnailSize: 450,
    noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxKaUbLj-Hmd7i60uf1JQGGG512KxIah6hpkAIuYgWynsg0NjUqn1WEzOKyyIBTW7k7TKvhLm6ynqKBO8K9G3tctLYZrACiXMOGBZWmWzapBWvoUiKMoEb0dREatbSQng5iKQqpf46VV_c/s16000/Thumb+No+Image.jpg&quot;,
    containerId: &quot;<b:eval expr='&quot;related-post-&quot; + data:post.id'/>&quot;,
    newTabLink: true,
    moreText: &quot;Read More&quot;,
    widgetStyle: 4,
    callBack: function() {}
};
</script>
<script>/*<![CDATA[*/ var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h3 class='title'>Related Posts</h3>",widgetStyle:1,homePage:"https://misteroperator.blogspot.com/",numPosts:7,summaryLength:320,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",containerId:"related-posts",newTabLink:false,moreText:"Read more",callBack:function(){}}; for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.async="async";b.rel="preload";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<!-- <div class="clear"/> -->',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t; r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+(\-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"} if(A==2){c+='<li><div class="item"><div class="itemThumbnail postThumbnail"><a aria-label="'+w+'" href="'+v+'"><div class="post-thumb" data-bg="'+r+'" style="background-image:url('+r+')"></div></a></div><div class="itemTitle"><a href="'+v+'">'+w+'</a></div></div></li>'} else{c+='<li class="js-ripple"><div class="item"><div class="item-thumbnail"><a aria-label="'+w+'" href="'+v+'"><div class="post-thumb" data-bg="'+r+'" style="background-image:url('+r+')"></div></a></div><div class="itemTitle"><a href="'+v+'">'+w+'</a></div></div></li>'} }s.innerHTML=c+="</ul>";d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); /*]]>*/</script>   
   </b:includable>

Replace your desired lable name with this line "YOUR LABLE GOES HERE" in upper script and also replace your url with my blog url. After this follow step two.

  • Paste given css file before </head> tag.
<style>
/* Related Themes */
.widget_title{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid #dadce4;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:12px;width:100%}.widget_title .title{-webkit-box-sizing:border-box;box-sizing:border-box;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:3px solid #1a73e8;color:#202124;display:inline-block;font-size:16px;font-weight:700;line-height:44px;margin:0;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:auto}.related-post ul{margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-gap:20px}.related-post ul li{margin:0;list-style:none;border:1px solid #dadce4;border-radius:8px;transition:box-shadow .2s;position:relative;overflow:hidden}.related-post .item-thumbnail a{display:block;position:relative;padding-top:65%}.related-post .item-thumbnail .post-thumb{display:block;position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;background-repeat:no-repeat}.related-post .itemTitle{padding:20px 15px 15px}.related-post .itemTitle a{font-size:16px;font-weight:400;color:#1b334b;line-height:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.related-post .itemTitle a:hover{color:#3b81de}@media screen and (max-width:768px){.related-post ul{grid-template-columns:1fr 1fr 1fr}}@media screen and (max-width:480px){.related-post ul{grid-template-columns:1fr 1fr}}
      </style>

Friends this step is very important because now you need to decide where you want to show this widget. if you want to show this widget at the end of the post than you need to add the given code before closing post article tag as shown in below image.

Save your theme and open your blog post to see the result if widget is not working and your facing problem do not worry because you can watch this video tutorial for further help

If you are new and do not know even the abc about blogging you can join our full blogging course.

Comments