أفضل أداة مواضيع ذات صلة أسفل المشاركات [بلوجر]

/*!
* Mint Web (www.imintweb.com)
*/

/*!Core (Do not modify) {{*/

.relCard,
.relCard-image,
.relCard-snippet,
.relCard-title,
.relCardate {
margin: 0;
box-sizing: border-box;
}
.relCard {
padding-right: .5em;
padding-left: .5em;
padding-bottom: 1em;
}
.relCard,
.relCard-image img {width: 100%;}
.wjs-related {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -.5em;
margin-left: -.5em;
font-size: 14px;
}
.relCard-image {display: block;}
@media (min-width:376px) {.relCard {width: 50%;}}
@media (min-width:576px) {
.relCard {width: 33.333333%}
.wjs-related {font-size: 16px;}
}
/*}} End of core {{* /

/ *! Customization * /
/* Body
-----------------------------------------*/
.relCard-content {
box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.2); /* shadow */
}
/* Data container
-----------------------------------------*/
.relCard-data {
padding: 1.2em; /* filling */
background-color: #fff; /* background color */
}
/* Title
-----------------------------------------*/
.relCard-title {
font-size: 1em; /* title size */
margin-bottom: .25em; /* separation */
color: #464646; /* title color */
}
/* Date
-----------------------------------------*/
.relCard-date {
font-size: .9em; /* text size */
color: #BBBBBB; /* date color */
}
/* Summary
-----------------------------------------*/
.relCard-snippet {
margin-top: .5em; /* separation */
color: #757575; /* text color
*/
}

<b:includable id='status-message'>

<b:includable id='postRelated' data='post'>
<div id='wjs-related' class='wjs-related'/>
<script>
var related = (function(){
'use strict';

//Configuracion
var defaults = {
id: '<data:post.id/>',
homepage: window.location.protocol + '//' + window.location.hostname,
image: 'src/imgdefault.jpg',
length: 6, 
localeDate: 'ar-EG', 
snippet: 50,
imgSize: 's256',
container: document.getElementById('wjs-related'),
tags: [<b:loop values='data:post.labels' var='label'>'<data:label.name/>',</b:loop>]
};

//<![CDATA[
var tags$length = defaults.tags.length;
var script = document.createElement( 'script' );
var src = defaults.homepage + '/feeds/posts/default' +
'?alt=json-in-script' +
'&callback=related' +
'&max-results=' + ( defaults.length + 1 ) +
'&q=';
for ( var n = 0; n < tags$length; n++ ){
src += 'label:"' + defaults.tags[ n ] + '"' + ( n === tags$length - 1 ? '' : '|' );
}
script.src = src;
document.body.appendChild( script );
function render( data ){
var title = data.title.$t;
var content = data.content;
var summary = data.summary;
var body = content ? content.$t : summary.$t;
var snippet = (body).replace(/<[^>]*>?/g,'').substring( 0, defaults.snippet ) + '...';
var img = data.media$thumbnail;
var tempHtml = document.createElement('div');
tempHtml.innerHTML = body;
var imgHtml = tempHtml.querySelector('img');
var image = ( img ? img.url : (imgHtml ? imgHtml.src : defaults.image)).replace( /s\B\d{2,4}-c/, defaults.imgSize); 
var url = (function(){
for ( var i = 0; i < data.link.length; i++ ){
var link = data.link[i];
if ( link.rel === 'alternate' ){
return link.href;
}
}
})();
var published = new Date( data.published.$t ).toLocaleDateString(
defaults.localeDate,
{year:'numeric', month:'long', day: 'numeric'}
);
return (
'<div class="relCard">'+
'<div class="relCard-content">'+
'<a href="' + url + '" class="relCard-image">'+
'<img src="' + image + '" alt="' + title + '" />'+
'</a>'+
'<div class="relCard-data">'+
'<h3 class="relCard-title">' + title + '</h3>'+
'<div class="relCard-date">' + published + '</div>'+
'<p class="relCard-snippet">' + snippet + '</p>'+
'</div>'+
'</div>'+
'</div>'
);
}
function related( json ){
var i = 0;
var post;
var length = defaults.length;
for ( ; i < length && ( post = json.feed.entry[ i ] ); i++ ){
if ( defaults.id !== post.id.$t.split( '.post-' )[ 1 ] ){
defaults.container.innerHTML += render( post );
} else {
length++;
}
}
}
return related;
})();
//]]></script>
</b:includable>

<b:include cond='data:view.isPost and data:post.labels' name='post-related'/>