Customizable Related Posts Widget For Blogger

We already posted a few tutorials on how to add together related posts widget alongside thumbnails inward Blogger alongside summaries or exclusively titles, which tin live compiled into a unmarried All-In-One Widget alongside powerful options. This novel customizable related posts widget for Blogger integrates all the features we've seen earlier as well as more, such equally thumbnails (square or round), postal service dates, excerpts, display exclusively titles / thumbnails.

Now let's encounter what this related posts blogger widget has to offer.

Adding Customizable Related Posts Widget inward Blogger

Log into your Blogger dashboard, become to 'Template' as well as opened upwards template editor past times clicking the 'Edit HTML' push below 'Live On Blog' preview.

Next, we're going to usage the template search feature, live certain to follow these directions exactly:

1. Place your cursor on the template code.
2. Click once.
3. Press CTRL as well as F at the same fourth dimension (PC) or Command as well as F (Mac).

The search box volition opened upwards inward the upper correct corner of the template editor.

Type </head> inward the search box, thence press ENTER. This volition bring y'all to the </head> tag inward your template as well as highlight it inward yellow.

Select as well as re-create the entire CSS manner below as well as glue it straight ABOVE the </head> tag:

<style type='text/css'>
.related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px 'Open Sans', sans-serif;margin-bottom:20px;}.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 'Open Sans', sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px 'Open Sans', sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px enterprise 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 machine 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 'Open Sans', sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px 'Open Sans', sans-serif;color:#999999;}
</style>

Next, nosotros involve to add together the script - search for the next line:

<b:includable id='postQuickEdit' var='post'>

Once y'all establish it, click the small-scale arrow non beside it but alongside i degree inward a higher identify to expand code as well as scroll downwardly until y'all encounter </b:includable> - correct below this tag, y'all should encounter the business including the "postQuickEdit" id.

See the screenshot for to a greater extent than help:

Just ABOVE the </b:includable> tag, add together the next script:

<b:if cond='data:blog.pageType == "item"'>
<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'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];
var relatedSettings = {
blogURL:"<data:blog.homepageUrl/>",
relatedHeading:"<h4><span>Related Posts</span></h4>",
relatedPosts:4,
relatedStyle:4,
thumbnailSize:"w300-h200-p-nu",
defaultThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp9k0RsDUkm0s6_c3aOxZZm2To2hJwf9CBDOyKAdOEjLjCr6ZzYr9sEWBm5VxNAEWSuCLE9WNUvnY7BYPRwcSCnoPxO2aNCDWFRw4oFZGqPQGX2eFZCIu8Spz0OcktSEYzRAZH6IpsKFfG/300-h200-c/no-thumb.png",
roundThumbs:false,
titleLength:"auto",
snippetLength:45,
centerText:false,
openNewTab:false
};</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e inward 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)+"…":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)+"…":"";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="We already posted a few tutorials on how to add together Customizable Related Posts Widget for Blogger" 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="We already posted a few tutorials on how to add together Customizable Related Posts Widget for Blogger" 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="We already posted a few tutorials on how to add together Customizable Related Posts Widget for Blogger" 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="We already posted a few tutorials on how to add together Customizable Related Posts Widget for Blogger" 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="We already posted a few tutorials on how to add together Customizable Related Posts Widget for Blogger" 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="We already posted a few tutorials on how to add together Customizable Related Posts Widget for Blogger" 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="We already posted a few tutorials on how to add together Customizable Related Posts Widget for Blogger" 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>

How to Customize the Related Posts Widget for Blogger?

To alter the 'Related Posts' text that appears inward a higher identify the widget, modify the text inward red:

relatedHeading: "<h4><span>Related Posts</span></h4>",

To alter the issue of posts to display, alter the '4' value from this line:

relatedPosts: 4,

Note: y'all may involve to alter the percentages inward the CSS styles inward a higher identify inward companionship to brand posts fit the related container. Just follow the values inward ruddy as well as play alongside them until y'all instruct the best results.

To alter the manner of the related posts widget, modify the '4' value from:

relatedStyle: 4,

Available Related Posts Styles

simple related posts widget that volition exhibit postal service titles only
display postal service titles as well as snippets
display postal service thumbnails, titles as well as snippets
display related posts thumbnails, titles as well as postal service appointment (shows past times default)
display related posts thumbnails as well as titles
post titles inward front end of thumbnails, instead of having them below the thumbnail
display thumbnails only
small thumbnail alongside titles on the correct as well as appointment below
small thumbnails alongside postal service titles as well as excerpts on the right

Customizing the Related Post Thumbnail Size & Style

By default, thumbnails are resized as well as cropped automatically to live 300px broad past times 200px tall. If y'all desire to alter the width as well as peak of the thumbnails, modify the '300' as well as '200' values from:

thumbnailSize: "w300-h200-p-nu",
defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp9k0RsDUkm0s6_c3aOxZZm2To2hJwf9CBDOyKAdOEjLjCr6ZzYr9sEWBm5VxNAEWSuCLE9WNUvnY7BYPRwcSCnoPxO2aNCDWFRw4oFZGqPQGX2eFZCIu8Spz0OcktSEYzRAZH6IpsKFfG/300-h200-c/no-thumb.png",

Note: 'w' comes from width, 'h' comes from height. To brand the thumbnails square, alter the 'h' (height) value as well as arrive equal alongside 'w' (width) value. H5N1 higher value volition outcome inward to a greater extent than high-res images.

If y'all desire thumbnails guide maintain rounded corners, alter 'false' alongside 'true':

roundThumbs:false,

Customizing Related Titles & Excerpts

To shorten the postal service title, alter auto alongside the issue of characters to show:

titleLength: "auto",

To trim back or add together to a greater extent than characters to the snippets, alter the "45" value:

snippetLength: 45,

If y'all desire to oculus text (title as well as summary), alter 'false' to 'true':

centerText:false,

To opened upwards links inward a novel tab when visitors click on a related post, alter "false" to "true":

openNewTab: false

Once you're done alongside the settings, click the 'Save Template' push as well as immediately y'all tin encounter the related posts widget alive on your Blogger blog.

Final words

That's it! With the novel customizable Related Posts widget for Blogger y'all volition live able to add together unique features to the related content department of your blog. However, all of these styles hold off as well as piece of job slightly different, thence bring your time, as well as pick your favorite.