اضافة المنشورات ذات الصلة في بلوجر بين منشورات المدونة

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

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

قبل البرنامج التعليمي، دعونا نلقي نظرة على ميزاته.

تلقائي : عند إضافة المنشورات ذات الصلة إلى بلوجر ، سيبدأ تلقائيا في عرض المشاركات ذات الصلة على موقعك الإلكتروني ووضعه في منتصف المنشور. ليس هناك حاجة لتحرير أي شيء آخر.
قابل للتخصيص : تستخدم هذه الميزة CSS حتى تتمكن من تحريرها بأسلوبك.
التحكم في معدل الارتداد : سوف يقلل من معدل الارتداد ، مما سيجعل درجة SEO الخاصة بك أفضل في محركات بحث Google.
شبة مستجيب : إذا كنت تستخدم قالب بلوجر متجاوب ، فستقوم الاداة ايضًا بتطبيق الحجم وفقًا لعرض المقالة . ولكن في قالب بلوجر غير مستجيب لن تكون قادرة على التكيف مع عرض الموقع.

ستحتوي هذه الميزة على بعض القوالب التي لا تدعمها

اضافة المنشورات ذات الصلة بين منشورات بلوجر

لإضافة مقالات ذات صلة إلى بلوجر ، اتبع الخطوات التالية.

لتجنب الأخطاء عند إضافة، يجب عمل نسخة أحتياطية من القالب.

الخطوة 1. في لوحة تحكم بلوجر توجهة الى المظهر > تعديل HTML.

الخطوة 2. ابحث عن العلامة ]]></b:skin> وضع كود CSS أدناه أعلى العلامة.

/* منشورات ذات صلة */
.bspostRelatedIn{text-align: right;
    padding: 15px;
    margin: 30px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 15px;
    position: relative;
box-shadow: rgb(92 101 101 / 50%) 0px 3px 8px;
    background: #ceffe8;} 
#bspostRelatedIn_title{font-size: 24px;
    margin: 0;
    display: inline-block;
    padding: 0 10px;
    position: absolute;
    top: -14px;
    right: 10px;
    background-color: #fefefe;
    color: #7d7d7d;} 
.bspostRelatedIn ul {
    list-style: none;
    padding: 3px 22px 0;   
} 
.bspostRelatedIn li{ border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: disc;
} 
.bspostRelatedIn li:hover {text-decoration: underline;}

يمكنك اختياريا تحديد أنماط عرض القائمة، واستبدال الاكواد التالية كما هو موضح أدناه.

.bspostRelatedIn li{ border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: disc;
}

يمكنك استبدال css هذه لتغيير شكل العرض الى :

النوع الأول :

مقالات ذات صلة :

01. إعداد Cloudflare لبلوجر
02. إضافة بلوجر الى ادوات مشرفي المواقع
03. التحميل الكسول للصور في بلوجر

.bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: decimal-leading-zero;
}

الخطوة 3. بعد إضافة واختيار شكل الـ CSS المناسب ، قم بأضافة كود JavaScript أعلى علامة </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script type='text/javascript'> 
//<![CDATA[ 
var bspostRelatedIn = new Array(); var bspostRelatedInNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; bspostRelatedIn[bspostRelatedInNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[bspostRelatedInNum] = entry.link[k].href; bspostRelatedInNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = bspostRelatedIn[i];}} bspostRelatedIn = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((bspostRelatedIn.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < bspostRelatedIn.length && i < 3) { document.write('<li><a href="' + relatedUrls[r] + '">' + bspostRelatedIn[r] + '</a></li>'); if (r < bspostRelatedIn.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');let element = document.createElement('a');element.href = 'https://www.bloggerspice.com/';element.pathname = 'embed' + element.pathname;console.log(element.toString());}//]]> 
</script> 
</b:if>

يمثل الرقم 3 الموضح باللون الاحمر بعدد المنشورات ذات الصلة التي تظهر داخل المقالة ، تستطيع تغييره الى عدد المشاركات التي تريد عرضها.

الخطوة 4. هذه الخطوة هي الأكثر أهمية، إضافة HTML و javascript لعرض المقالات ذات الصلة داخل المنشور . ابحث عن العلامة <data:post.body/> احذفها وضع مكانها الكود التالي.

<div expr:id='&quot;post1&quot; + data:post.id'/> 
<div class='bspostRelatedIn'> 
<b:if cond='data:post.labels'> 
<b:loop values='data:post.labels' var='label'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/> 
</b:if> 
</b:loop> 
</b:if> 
<div id='bspostRelatedIn_title'>مقالات فد تهمك</div>
<script type='text/javascript'> 
removeRelatedDuplicates(); 
printRelatedLabels(); 
</script> 
</div> 
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div> 
<script type='text/javascript'> 
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); 
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); 
var s=obj1.innerHTML; 
var t=s.substr(0,s.length/2); 
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); 
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} 
</script>

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

هذه العلامة max-results=3 باللون الاحمر هي نفسها في الكود أعلاه ، يعني عندما تريد تغيير عدد عرض المنشورات ذات الصلة غيرها من هنا ايضًا.

الخطوة 5. انقر على حفظ القالب واذهب الى مقالة لرؤية النتائج.

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

هذا كل شيء ، لقد قمنا بأضافة المنشورات ذات الصلة في بلوجر بنجاح. إذا كان لديك أي مشاكل يرجى ترك تعليق في الاسفل.

"لا تقرأ وترحل، ضع بصمتك.. وشاركنا برأيك ..."