recent
أخبار ساخنة

شرح اضافة مواضيع ذات صلة وسط المواضيع تلقائيا|Related-Post

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

شكل الإضافة


طريقة التركيب

  • أولا يجب عليك من أخذ نسخة احتياطية من قالبك لعدم حدوث أي خطا
  • ثم قم بالتوجه الى لوحة التحكم والضغط على القالب
  • ثم تحرير HTML وابحث عن هذا الوسم </head> عن طريق الضغط ctr+f
  • ثم قم بوضع الكود التالي فوقها مباشرة

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
  • الأن قم بالبحث عن هذا الوسم ]]></b:skin> ووضع الكود التالي فوقه
/* Related Post Style 1 */
.related-simplify{position :relative;padding:0;margin:15px auto;width : 100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position :relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceleft .3s alternate ease infinite;animation:bounceleft .3s alternate ease infinite}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position :absolute;margin:0 4px 0 9px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 30px 0 0;}
@keyframes bounceleft{from{transform:translateX(0)}to{transform:translateX(3px)}}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display :none;}
@-webkit-keyframes bounceleft{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
  • الخطوة الأخيرة وهي البحث عن هذا الكود <data:post.body/> سوف تجد أكثر من كود في الغالب يكون الثالث هو المطلوب قم باستبداله بهذا الكود ويمكنك تجريب أكثر من واحدة حتي تصل الى الكود المطلوب
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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>
<h4>قد يهمك أيضا</h4>
<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>
ثم بعد ذلك قم بحفظ القالب ومعاينة الإضافة على مدونتك
google-playkhamsatmostaqltradent