أخر المقالات
تحميل...

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


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

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

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



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


  • أدخل لوحة مدونتك على بلوجر 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

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

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

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

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

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

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

شكرآ اخى على المتابعة تم التعديل
جزاك الله خيرآ

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

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

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

نحن نعرض الإعلانات على الموقع للإسهام في تحسين موقعنا.

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

شكرًا لك

×