افضل طريقه لاضافة مواضيع ذات صلة لمدونات بلوجر كموقع حوحو للمعلوميات igli5

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

معاينة الاضافة هي اهم شيء قبل تركيبها .

1. معاينة : من هنا

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

اولا عليك القيام بتحرير القالب ثم ctrl+f ثم ابحث عن وسم </head> او /head ثم ركب الكود التالي قبله :

• <script type='text/javascript'>
  //<![CDATA[
  var relatedTitles=new Array();var relatedTitlesNum=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];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;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]=relatedTitles[i];}}
  relatedTitles=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((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<20){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
  i++;}
  document.write('</ul>');document.write('<a href="" target="_blank"><font size="1" color="black"></font></a>');}
  //]]>
  </script>
  <style>
  #related-posts{margin-left:0;font-weight:100;background-color:#fff;padding:12px}
  #related-posts ul li{display:block;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:21px;margin-bottom:5px;line-height:2em}
  #related-posts ul li:before{content:&#39;\f0a8&#39;;float:right;font-family:fontawesome;position:relative;top:9px;margin-left:8px;margin-right:8px;color:#fff;background:#465769;width:22px;text-align:center;height:22px;font-size:14px;line-height:22px;border-radius:50%}
  #related-posts p{text-align: right;font-weight: 500;font-size: 16px;padding-bottom: 10px;border-bottom: 2px solid #ccc;line-height: 24px;position: relative;color: #f78c21;margin-bottom: 20px;}
  #related-posts p::before {content: &quot;&quot;;position: absolute;height: 2px;width: 32px;background-color: #f78c21;bottom: -2px;left: initial!important;right: 0;}
  #related-posts p:after {content: &quot;\f021&quot;;display: block;background-color: #f78c21;font-family: FontAwesome;height: 28px;width: 32px;line-height: 28px;font-size: 14px;text-align: center;border-radius: 2px;float: right;margin-right: 0;margin-left: 10px;color: #FFF;}
  </style>

الكود التالي يمكن وضعه فوق ازرار مشاركة الموضوع او تعريف الكاتب او  أسفل وسم <data:post.body/> : 

• <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-posts'>
  <p> مواضيع ذات صله بهذه الموضوع </p>
  <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=5&quot;' type='text/javascript'/>
  </b:if>
  </b:loop>
  <script type='text/javascript'>
  var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
  </script>
  </div>
  </b:if>