My theme use the following code in my blogger blog to show related articles based on labels:
<div id='related-posts'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<data:label.name/>
</b:if>
</b:loop>
</b:if>
</div>
The javascript code also includes other functions within it, but the functionality should be here:
<!-- BlockFeeds AJAX -->
<script defer='defer' type='text/javascript'>
//<![CDATA[
function blockfeeds(parent, count, label, style) {
// Image Optimizations
function opImages(img, size, w, h) {
return img.replace(size, 'w' + w + '-h' + h)
}
// No Thumb & Months Name
var furl = "",
startIndex = Math.floor( (Math.random() * count ) + 1 ),
noThumb = "https://1.bp.blogspot.com/-YwnZjpLUpT4/UPSj_ygbl7I/AAAAAAAADrU/NARmFertXcA/s000/noimage.jpg",
monthsName = [ "", januaryMsg, februaryMsg, marsMsg, aprilMsg, mayMsg, juneMsg, julyMsg, augustMsg, septemberMsg, octoberMsg, novemberMsg, decemberMsg ];
// JSON FEED URL by Sort
if (label !== undefined) {
if (label.match('recent')) {
furl = '/feeds/posts/summary?alt=json-in-script&max-results=' + count;
} else if (label.match('random')) {
furl = '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + count;
} else if ( !(label.match('recent')) || !(label.match('random')) ) {
furl = '/feeds/posts/summary/-/' + label + '?alt=json-in-script&max-results=' + count;
}
} // JSON FEED URL Close
// AJAX Function
if (furl.length > 0) {
$.ajax({
type: 'GET',
url: furl,
cache: true,
dataType: 'jsonp',
beforeSend: function(){
parent.html('Caricamento...');
},
success: function(data){
var htmlcode = '',
feedcode = '',
link = '',
json = data.feed.entry;
// HTML Start Code =========================================================
/* Containers */
var conD = "<div class='container-ct'>";
switch(style) {
case 'featured':
htmlcode += '<div class="layout-item">' + conD + '<div class="grp-post-entry">';
break;
htmlcode += '<div class="layout-item-1">' + conD + '<div class="grp-post-entry uk-position-relative uk-visible-toggle uk-light" data-uk-slider="autoplay: true; autoplay-interval: 5000">';
break;
case 'related-posts':
htmlcode += '<ul>';
break;
default:
break;
}
// The Overall Loop for Entries
for (var i=0; i<json.length; i++) {
// Get Link data ===========================================================
for (var j=0; j<json[i].link.length; j++) {
if(json[i].link[j].rel == "alternate") {
link = json[i].link[j].href;
break;
}
}
// Get Category data =======================================================
if ('category' in json[i]) {
if (json[i].category[0].term !== undefined) {
var getCategory = json[i].category[0].term;
} else {
var getCategory = 'Uncategorized';
}
}
// Get Time date data ======================================================
var getDate = json[i].published.$t,
y = getDate.substring(0, 4),
m = getDate.substring(5, 7),
d = getDate.substring(8, 10),
date = monthsName[parseInt(m, 10)] + ' ' + d + ', ' + y ;
// Get other data ==========================================================
var getTitle = json[i].title.$t,
getId = json[i].id.$t,
getAuthor = json[i].author[0].name.$t,
getAuthorImg = json[i].author[0].gd$image.src,
getAuthorUrl = json[i].author[0].uri.$t,
getAuthorImg = json[i].author[0].gd$image.src,
getComments = json[i].thr$total.$t,
getSummary = json[i].summary.$t,
shortSummary = getSummary.substr(0, 150) + '...',
postThumb = json[i].media$thumbnail.url;
// Comments Strings ========================================================
if(getComments == 0) {
var postComments = noCommentsMsg;
} else if (getComments == 1) {
var postComments = '1' + ' ' + commentMsg;
} else {
var postComments = getComments + ' ' + commentsMsg;
}
// Thumbnail Optimization ==================================================
if(postThumb !== undefined) {
// If Youtube
if(postThumb.match('default.jpg')) {
var $postThumb = postThumb.replace( "/default.jpg", "/maxresdefault.jpg");
}
// If Something Else
switch(style) {
case 'featured':
if(postThumb.match('s72')) {
var $postThumb = opImages(postThumb, 's72', 770, 400);
}
break;
case 'breakingnews':
if(postThumb.match('s72')) {
var $postThumb = opImages(postThumb, 's72', 75, 50);
}
break;
case 'related-posts':
if(postThumb.match('s72')) {
var $postThumb = opImages(postThumb, 's72', 290, 200);
}
break;
default:
if(postThumb.match('s72')) {
var $postThumb = opImages(postThumb, 's72', 200, 200);
}
break;
}
var $src = '<img src="' + $postThumb + '" alt="' + getTitle + '" />';
} else {
var $src = '<img src="' + noThumb + '" alt="' + getTitle + '" />';
}
// Helpers Variable ========================================================
var postId = getId.match(/post-\w*/),
title = '<h3 class="title-post"><a href="' + link + '" rel="bookmark" title="' + getTitle + '">' + getTitle + '</a></h3>',
category = '<a class="label-post" href="/search/label/' + getCategory + '?&max-results=12" rel="category tag">' + getCategory + '</a>',
comments = '<div class="post-comments"><span class="dot"></span><a href="' + link + '#comments">' + postComments + '</a></div>',
author = '<div class="post-author vcard"><span class="by-author">' + byMsg + '</span><span class="name-author"><a href="' + getAuthorUrl + '" rel="author" title="' + byMsg + ' ' + getAuthor + '">' + getAuthor + '</a></span></div>',
avtauthor = '<div class="post-author-img"><a href="' + getAuthorUrl + '"><img src="' + getAuthorImg + '" alt="' + getAuthor + '"/></a></div>',
time = '<div class="grp-post"><span class="date-post"><i class="fa fa-clock-o" aria-hidden="true"></i><time datetime="' + getDate + '">' + date + '</time></span></div>',
meta = '<div class="post-meta"><div class="post-meta-inner">' + author + '' + category + '' + time + '' + comments + '</div></div>',
shortMeta = '<div class="post-meta"><div class="post-meta-inner">' + time + '' + comments + '</div></div>',
postMore = '<div class="post-more"><a href="' + link + '">' + readMoreMsg + '</a></div>',
postSummary = '<div class="sample-post">' + shortSummary + '</div>';
// HTML Code for Loop ======================================================
switch(style) {
case 'breakingnews':
if ( i === 0 ) {
htmlcode += '<div class="post-entry post-entry-13"><ul class="uk-slider-items uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m"><li><a class="thumb-post ' + postId + '" href="' + link + '" style="background-image:url(' + $postThumb + ')" data-post-id="' + postId + '"></a><div class="panel-post"><div class="ct-panel-post">' + category + '' + title + '</div></div></li>';
} else {
htmlcode += '<li><a class="thumb-post ' + postId + '" href="' + link + '" style="background-image:url(' + $postThumb + ')" data-post-id="' + postId + '"></a><div class="panel-post"><div class="ct-panel-post">' + category + '' + title + '</div></div></li>';
}
break;
case 'featured':
if ( i === 0 ) {
htmlcode += '<div class="post-entry post-entry-11 fl-left"><ul><li><a class="thumb-post ' + postId + '" href="' + link + '" title="' + getTitle + '"><img data-src="' + $postThumb + '" data-post-id="' + postId + '" alt="' + getTitle + '" uk-img rel="preload" fetchpriority="high"/></a><div class="panel-post fix-panel-post"><div class="ct-panel-post">' + category + '' + title + '' + '</div></div></li></ul></div><div class="post-entry post-entry-12 fl-right"><ul>';
} else {
htmlcode += '<li><a class="thumb-post ' + postId + '" href="' + link + '" title="' + getTitle + '"><img data-src="' + $postThumb + '" data-post-id="' + postId + '" alt="' + getTitle + '" uk-img/></a><div class="panel-post fix-panel-post"><div class="ct-panel-post">' + category + '' + title + '' + '</div></div></li>';
}
break;
case 'related-posts':
htmlcode += '<li><a class="thumb-post ' + postId + '" href="' + link + '" title="' + getTitle + '"><img data-src="' + $postThumb + '" data-post-id="' + postId + '" alt="' + getTitle + '" uk-img/></a><div class="panel-post">' + category + '' + title + '' + '</div></li>';
break;
default:
htmlcode += '<p>This is a default!</p>';
break;
}
}// Overall Loop Close for Entries
}, // Success Function Close
error: function(){
parent.html("<div class='uk-alert-danger' data-uk-alert=''><p>Error loading feeds! Check if your blog is public, contains at least a label in all articles and that you've allow your blog feed as full! if the problem still please do not hesitate to contact us.</p></div>");
} // Error Function Close
}); // Ajax Function Close
return false;
} // If URL Close
} // BlockFeeds Function Close
// Get Global Shortcode
$('.widget-content').each(function() {
var $this = $(this),
sp = $this.text().split("/");
if(!isNaN(sp[0])) {
var count = sp[0],
style = sp[1],
label = sp[2];
blockfeeds($this, count, label, style);
}
});
// Get Related Posts Shortcode
$('.related-main .related-posts').each(function() {
var $this = $(this),
count = 6,
style = 'related-posts',
label = $this.text();
blockfeeds($this, count, label, style);
});
// Cate title
$('.mog-category h2.title').each(function() {
var $this = $(this),
label = $this.text();
blockfeeds($this, label);
$(this).html('<a href="/search/label/' + label + '?&max-results=12" rel="category tag">'+ label +'</a>');
});
// Summary Grid Posts
$('.sample-post').each(function() {
var numChars = 210;
var re = /<\S[^>]*>/g;
var postcontent = $(this).find('.ct-sample-post').html().replace(re,"");
var quoteEnd = postcontent.lastIndexOf(" ");
if (postcontent.length > numChars) {
postcontent = ''+postcontent.substring(0,quoteEnd)+' ...';
}
$(this).html(''+ postcontent +'');
});
//]]>
</script>
I'm not very familiar with javascript, I tried to take inspiration from other codes online and include strings without success.