طريقة إضافة مواضيع ذات الصلة على بلوجر أفضل وأسهل إضافة


السلام عليكم ورحمة الله وبركاته

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

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



كيفية إضافة مقالات ذات الصلة للبلوجر؟


  • أدخل لوحة مدونتك على بلوجر www.blogger.com ثم إذهب إلى القالب وأنقر على تحرير html

بإستخدام مفتاح الإختصار ctrl+f في لوحة المفاتيح أبحث عن الرمز </head> ثم أضف الكود التالي فوقه مباشرةً

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'> #related-posts{float:right;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
</style>
    <script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
    </script>
</b:if>


الرمز المشار إليه width:100px;height:100px; للتحكم بحجم الصور المصغرة في الإضافة.


  • الخطوة الثانية البحث عن الرمز <div class='post-footer'> وإضافة الكود التالي أسفله مباشرةً

قد تجد أكثر من كود من هذا <div class='post-footer'> اختر الأخير دائماً

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id='related-posts'>
 <b:loop values='data:post.labels' var='label'>
 <b:if cond='data:label.isLast != &quot;true&quot;'>
 </b:if> <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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;<b>مواضيع ذات الصلة:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> </b:if> </b:if>

ثم أحفظ القالب لمشاهدة النتائج :)
يُمكنك التحكم بعدد المواضيع التي ترغب بظهورها في الإضافة من خلال التحكم بالرقم maxresults=5

هناك 14 تعليقًا

  1. جزاك الله خيرا اخي

    ردحذف
  2. جزاك الله خيرا الطريقة ناجحة 100%
    لدي سؤال بسيط كيف أغير عدد المواضيع المعروضة

    ردحذف
    الردود
    1. وإياك إن شاء الله
      يمكنك قراءة نهاية الشرح لمعرفة ذلك من خلال الرقم المشار إليه maxresults=5

      حذف
  3. اضافة رائعة
    ولكن المشكلة ان العنوان لايظهر كاملآ
    كيف يمكننا حل تلك المشكلة

    ردحذف
    الردود
    1. للتحكم بعدد الأحرف يمكنك التعديل على الرقم بالرمز هذا .length>35

      حذف
    2. شكرآ اخى على المتابعة تم التعديل
      جزاك الله خيرآ

      حذف
  4. صديقي العزيز انت مبدع بس استفسار ما الحجم المفضل ان يكون لان احترت بالحجم مره تطلع طويله مره تطلع صغيره متوسطه علي حجم الصفحه ماصدقت وهل التعديل على الكود width:100px;height:100px علي رقمي 100 ام واحد فقط جزاك الله كل خير رابط مدونتي http://mohammed-libya.blogspot.com/2016/07/blog-post_26.html

    ردحذف
    الردود
    1. اهلا بك وجزانا الله واياك كل خير
      طبعا هذا width:100px;height:100px هو الطول والعرض أنا افضل ان تتركها كما هي لانها متجاوبة مع الصفحة ويمكنك زيادة عدد المشاركات بالرقم maxresults=5

      حذف
  5. شكرا على الأضافة .. لكن هناك مشكلة أن صور بعض المواضيع لا تظهر و تظهر بدل منها الصورة الأفتراضية .. ما الحل؟

    ردحذف
    الردود
    1. مرحبا بك
      بلى تظهر عزيزي ولكن لابد من رفع الصور من خلال مدونتك وليس جلب رابط الصورة من موقع اخر

      حذف
  6. ممكن طريقة لتظهر على سلايدر الايمن للمدونة

    ردحذف

تعليقاتكم تشجعنا على تقديم المزيد وهي محل إهتمامنا دائمًا

© جميع الحقوق محفوظة مداد الجليد 2013 - حقوق الطبع والنشر | مدعومة بكل فخّر من blogger | سياسة الخصوصية