مثال حي علي Codepen

تعد أداة أداة مواضيع ذات صلة أسفل المشاركات في بلوجر أداة مهمة جداً في خفض معدل الأرتداد في المدونة،ولكن نظرأ لأن بلوجر محدودة المميزات لذلك تواجه هذه الأداة الكثير من المشاكل حيث أن أغلب هذه الأدوات تقوم بجلب الأسعلام من نفس الوسم فقط ،وينتج عن هذه سيْ للأداة.

طلب من احد زوار مينت ويب منذ فتره مشاركة أداة مواضيع ذات صلة أسفل المشاركات مثل التي موجوده في المدونة ولكن لم يكن عندي الوقت الكافي لمشاركة هذه الأداة والتعديل عليها بحيث يسهل أستخدامها من طرف المدونين، الأن أصبحت هذه الأداة متاح للجميع وتستطيع أستخدامها كما شئت بكل سهولة.

جدول المحتوايات


التثبيت

أولاً توجه إلي لوحة تحكم بلوجر المظهر تخصيص متقدم إضافة Css ، هنا سنقوم بلصق الكود التالي:

/*!
* 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
*/
}


اضغط على زر "تطبيق علي المدونة" لتطبيق التغيرات الظهر تعديل HTML وابحث عما يلي :

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


وفوق ذلك ، الصق الحاوية التالية <b:includable> التي تنشئ المقالات ذات الصلة:

<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'/>


الخيارات

إذا كنت لا تعرف مكانه ، فيمكنك المحاولة أسفل الوسم <data:post.body/> ، لأن هذه الوسم يحتوي على نص المقالات.
ضمن المتغير الأفتراضي ، هناك خيارات مختلفة يمكنك تعديلها. يوضح الجدول التالي الخيارات:

الخيار النوع الوصف
id string وسم فريد لمشاركات المدونة
homepage string رابط الصفحة الرئيسية. يجب أن يتوافق مع معرف المشاركة
image image رابط الصورة الافتراضي. يتم استخدامه عند عدم وجود صور في المنشور
length number عدد المواضيع ذات الصلة لعرضها
localeDate string اللغة والمكان
snippet number عدد الحروف لملخص المقطفات من الموضوع
imgSize string معلمات لحجم الصورة
container string معرف الحاوية
tags object وسم التسمية. يجب أن يتوافق مع معرف المشاركة

الخاتمة

آمل أن تكون هذا المقال مفيد لك. لا تنسى مشاركة هذه المقالة في شبكات التواصل الاجتماعي ، هذا يساعدني دائمًا وأنا أقدر ذلك كثيراً. شكرا جزيلا لمرورك.