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

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

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

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

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


كيفية تركيبها
أولا أذهب إلى لوحة التحكم في مدونتك >> القالب >> تحرير 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 تعليق على " إضافة مواضيع ذات الصلة لمدونة بلوجر نمط حديث مع الصور المصغرة "

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

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

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

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

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

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

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

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

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

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

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

شكرًا لك

×