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


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

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

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



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


  • أدخل لوحة مدونتك على بلوجر 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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJIvlfguVsO0G13lCOpMi0M3_URyEHOclueqh0B0w21Ba4H-5zgJp2g3bVA_GVRNW1jHh7HHTnHaHsD-d0fo-3sDlLggTOrb9-o8G4NEDXPXOJUKTMAwpihDsefLIhU2TnPj6SiMtfBvla/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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJIvlfguVsO0G13lCOpMi0M3_URyEHOclueqh0B0w21Ba4H-5zgJp2g3bVA_GVRNW1jHh7HHTnHaHsD-d0fo-3sDlLggTOrb9-o8G4NEDXPXOJUKTMAwpihDsefLIhU2TnPj6SiMtfBvla/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 تعليق
  • غير معرف
    غير معرف 28‏/08‏/2015، 10:36:00 ص

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

    • مداد الجليد
      مداد الجليد 28‏/08‏/2015، 12:57:00 م

      وإياك أخي شكراً لمرورك

  • Unknown
    Unknown 30‏/12‏/2015، 5:19:00 ص

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

    • مداد الجليد
      مداد الجليد 30‏/12‏/2015، 11:26:00 م

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

  • علي ماهر
    علي ماهر 14‏/07‏/2016، 2:40:00 م

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

    • مداد الجليد
      مداد الجليد 15‏/07‏/2016، 5:08:00 ص

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

  • Unknown
    Unknown 27‏/07‏/2016، 9:00:00 م

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

    • مداد الجليد
      مداد الجليد 27‏/07‏/2016، 9:43:00 م

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

  • Mohamed kitab
    Mohamed kitab 15‏/01‏/2017، 6:12:00 م

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

    • مداد الجليد
      مداد الجليد 16‏/01‏/2017، 2:28:00 م

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

  • Unknown
    Unknown 22‏/04‏/2017، 5:18:00 م

    ممكن طريقة لتظهر على سلايدر الايمن للمدونة

    • مداد الجليد
      مداد الجليد 22‏/04‏/2017، 7:50:00 م

      http://www.madad2.com/2014/01/Slider-to-blogger.html

أضف تعليق
عنوان التعليق