إضافة مواضيع ذات الصلة لمدونة بلوجر نمط حديث مع الصور المصغرة

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

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

مشاهدة مثال حي من هنا


كيفية تركيبها
أولا أذهب إلى لوحة التحكم في مدونتك >> القالب >> تحرير html
ثم بإستخدام مفتاح الاختصار ctrlوf قم بالبحث عن الرمز ]]></b:skin>
شاهد هذه الصورة لمعرفة كيفية البحث عن الرموز في قالب مدونتك.
بعد العثور على الرمز ]]></b:skin> أضف الكود التالي فوقه مباشرةً

/* مواضيع ذات الصلة
----------------------------------------------- */
#related_posts {
line-height:1.4em;
margin-bottom:25px;
}
#related_posts ul,
#related_posts li {
list-style:none;
padding:0;
margin:0;
}

#related_posts li {
width:175px;
float:right;
height:150px;
overflow:hidden;
}
#related_posts .inner {
padding:0 5px;
}
#related_posts h4,
.comments > h4 {
border-bottom:1px solid #D5D5D5;
}
#related_posts .gmbrrltd {
display:block;
overflow:hidden;
height:140px;
padding:4px;
border:1px solid #D5D5D5;
}
#related_posts .gmbrrltd,
#related_posts .date {
-webkit-transition:margin-top 0.7s ease;
-moz-transition:margin-top 0.7s ease;
-ms-transition:margin-top 0.7s ease;
-o-transition:margin-top 0.7s ease;
transition:margin-top 0.7s ease;
}
#related_posts .gmbrrltd img {
width:100%;
height:100%;
}
#related_posts .inner strong {
font-size:120%;
line-height:1.3em;
display:block;
overflow:hidden;
max-height:54px;
padding:0 4px;
}
#related_posts p {
margin:10px 0 0;
padding:0 4px;
position:static;
}
#related_posts a {
text-decoration:none;
}
#related_posts li:hover .gmbrrltd,
#related_posts li:hover .date {
margin-top:-150px;
}
#related_posts .jcarousel-container {
padding:10px 0;
}
#related_posts .jcarousel-prev,
#related_posts .jcarousel-next {
top:-34px;
}
#related_posts .jcarousel-prev {
right:40px;
}
#related_posts .jcarousel-next {
right:5px;
}
#related_posts .loadingxx {
width:100%;
}


الآن أبحث عن الرمز </head>
ثم أضف الكود التالي فوقه مباشرةً

<script type='text/javascript'>//<![CDATA[
//Ajax Related Post by www.madad2.com
function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"#related_posts",tags:null,loadingText:"",loadingClass:"loadingxx",relevantTip:"",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],rlt_summary:100,ShowDate:true,relatedTitle:"مواضيع ذات الصلة:",readMoretext:"المزيد...",rlpBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",rlt_thumb:200,recentTitle:"مواضيع ذات الصلة:",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="related_posts"></div>');f.containerSelector="#related_posts"}var c=function(x,r){k++;if(x.feed.entry){for(var w=0;w<x.feed.entry.length;w++){var m=x.feed.entry[w];var o,p,C,q,B,n,t,A,v,y,z="";for(var u=0,s=m.link.length;u<s;u++){if(m.link[u].rel=="alternate"){z=m.link[u].href;break}}o=("content" in m)?m.content.$t:("summary" in m)?m.summary.$t:"";var l=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;q=e("<div></div>").append(o.replace(l,""));B=q.find("img");if("media$thumbnail" in m){p=m.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c");if(m.media$thumbnail.url.indexOf("img.youtube.com")!=-1){p=m.media$thumbnail.url.replace("default","0")}}else{if(B.length!=0){p=B[0].src}else{p=f.rlpBlank}}o=o.replace(/<\S[^>]*>/g,"");if(o.length>f.rlt_summary){o=o.substring(0,f.rlt_summary)}C=m.title.$t;y=m.published.$t.substring(0,10);n=y.substring(0,4);t=y.substring(5,7);A=y.substring(8,10);v=f.MonthNames[parseInt(t,10)-1];if(location.href.toLowerCase()!=z.toLowerCase()){i(z,C,p,o,n,A,v)}}}if(k>=f.tags.length){g.attr("class","");e("#related-posts-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(q,u,w,m,y,v,x){var r=e("li",g);for(var p=0,l=r.length;p<l;p++){var t=e("a",r.eq(p));var s=j(t);if(t.attr("href")==q){h(t,++s);for(var o=p-1;o>=0;o--){var n=e("a",r.eq(o));if(j(n)>s){if(p-o>1){r.eq(o).after(r.eq(p))}return}}if(p>0){r.eq(0).before(r.eq(p))}return}}g.append('<li><div class="inner"><a class="jdlunya" href="'+q+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img alt="'+u+'" src="'+w+'"/></span><strong>'+u+"</strong></a><p>"+m+'<a title="'+u+'" href="'+q+'">'+f.readMoretext+"</a>"+(f.ShowDate===true?'<span class="date"><strong>'+v+"</strong><span>"+x+"</span><span>"+y+"</span></span>":"")+"</p></div></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#related_posts"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="related_posts"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var o=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(o,f.tags)==-1){f.tags[f.tags.length]=o}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4><span>"+f.recentTitle+"</span></h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4><span>"+f.relatedTitle+"</span></h4>").appendTo(b)}}if(f.loadingText){e('<div id="related-posts-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/default?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var n=0,m=f.tags.length;n<m;n++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/default/-/"+f.tags[n]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};d();e(window).bind("load",function(){setTimeout(function(){var l;var m;var n=e(f.containerSelector);if(e(window).width()<479){l=1;m=n.width()/l}else{if(e(window).width()<980){l=2;m=n.width()/l}else{if(e(window).width()<1030){l=3;m=n.width()/l}else{l=4;m=n.width()/l}}}e("ul",n).jcarousel({easing:"easeInOutQuint",animation:800,auto:4,wrap:"last",scroll:l,setupCallback:function(o){o.reload()},reloadCallback:function(p){var o=Math.floor(p.clipping()/m);p.options.scroll=o;p.options.visible=o}})},3000)})})(jQuery)};
//]]>
</script>


نأتي لأخر إضافة والتي يخطأ فيها الكثير..
قم بالبحث عن الرمز <data:post.body/> وسوف يظهر لك على الشكل  التالي:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
أضف الكود التالي أسفله مباشرةً

<div id='related_posts'/>
<script class='jshilang' type='text/javascript'>
relatedPostsWidget();
</script><br/>
أكرر لا تضف الكود السابق حتى تجد الرمز 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
فوقه هذا الرمز يمكن ان يتوفر في مدونتك متكرر ولكن لن تجد اسفله مرة واحدة سوى الرمز <data:post.body/> اذا لم تجده قم بالبحث عن الرمز <b:if cond='data:blog.pageType == &quot;item&quot;'>
ثم اضفه بعد <data:post.body/> أتمنى أن تكون مفيددة حقاً 
إلى اللقاء
مشاركات أقدم المقال التالي
9 تعليق
  • Osama Abd-Elaziz
    Osama Abd-Elaziz 26‏/02‏/2014، 3:28:00 م

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

    • مداد الجليد
      مداد الجليد 26‏/02‏/2014، 4:26:00 م

      أهلاً وسهلاً بك أخ أسامة,
      نعم يمكنك العثور على كل ماطلبته هنا إن شاء الله فقط أختر التسمية بلوجر من أقسام المدونة ثم أ[حث فيها او يمكنك إستخدام مربع البحث
      أتمنى لك التوفيق شكراً جزيلاً لك.

  • غير معرف
    غير معرف 28‏/02‏/2014، 12:34:00 ص

    دائمآ ممبدع أشكرك كتير على الاضافة

    • مداد الجليد
      مداد الجليد 28‏/02‏/2014، 12:51:00 ص

      شكراً جزيلاً لك أتمنى أن أكون عند حسن ظنك

  • Unknown
    Unknown 11‏/05‏/2014، 7:33:00 م

    هحاول اطبق الدرس مع العلم انا عملتها اكثر من عشر مرات وما نجحت معى من مواقع اخرى اتمنى ان تكون هنا صحيحة وتنجح معى
    ودى المدونة
    www.devised1.tk

  • Unknown
    Unknown 11‏/05‏/2014، 8:56:00 م

    للاسف لم تنجح معى

    • مداد الجليد
      مداد الجليد 11‏/05‏/2014، 9:20:00 م

      لانك لم تضف الأكواد في مكانها الصحيح أقرأ ماهو اسفل الموضوع ثم قم بتطبيقه وسوف تنجح

  • smadi
    smadi 15‏/04‏/2016، 12:29:00 ص

    اخي العزيز لم تنجح الطريقة معي على الرغم من كل المحاولات
    www.sama-new.blogspot.com

    • مداد الجليد
      مداد الجليد 17‏/04‏/2016، 6:30:00 م

      جرب هذه الطريقة عزيزي
      http://www.madad2.com/2015/05/Add-related-posts-on-Blogger.html

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